Как переопределить страпис "основной кнопкой" - PullRequest
Новая
       17

Как переопределить страпис "основной кнопкой"

0 голосов
/ 18 сентября 2018

Я графический дизайнер, который должен настроить проект, сделанный с помощью strapi, - и я ооочень потерян.Мне удалось изменить backgroundcolors, backgroundimages пока - без проблем.НО: я совершенно не могу настроить элементы, такие как основные кнопки.

Я нашел много определений классов ".primary", изменил их - безрезультатно ... в конце концов я удалил их все ... но основные кнопки по-прежнему выглядят одинаково.Как?Зачем?

Единственная причина, по которой можно избавиться от внешнего вида основной кнопки, заключалась в удалении (например, страницы входа в систему -> в index.js в разделе admin / src / container / AuthPage) «первичного» изОбъявление кнопок. 

<Button primary label="users-permissions.Auth.form.button.login" type="submit" />

Но это не то, что я хотел.Я хочу настроить, например, основные кнопки.Не избавившись от этого.

Я искал stackoverflow для настройки strapi или проблем с пользовательским интерфейсом, но не смог найти решение.Я нашел много стратегий переопределения загрузочного CSS, например: Как я могу переопределить стили Bootstrap CSS?

Но страпис SCSS кажется чем-то другим, чего я, очевидно, пока не понимаю.

Если у кого-то есть идея или она уже переопределяет, например, основную кнопку - пожалуйста, дайте мне знать.

Заранее спасибо, Стеф.

1 Ответ

0 голосов
/ 18 сентября 2018

У вас есть два способа переопределить стиль кнопки по умолчанию

  1. Вы можете передать style реквизит для компонента 

    <Button label="Label" type="button" style={{ background: 'red' }} />

  2. Вы можете передать пользовательский className prop:

Для этого вам нужно добавить класс в ваши плагины / user-permissions / admin / src /Файл Containers / Auth / styles.scss` (где будет использоваться компонент) 

.customButton {
  background: red;
}

Затем в вашем index.js файле 

import Button from 'components/Button';
import styles from './styles.scss';

render() {
  return (
    <Button label="label" className={styles.customButton} />
  );
}
...