Question

我是一名平面设计师，必须自定义使用Stradi完成的项目-我实在不知所措。到目前为止，我设法更改了backgroundcolors和backgroundimages-没问题。但是：我完全无法自定义主要按钮之类的元素。

我发现很多类定义“ .primary”，更改了它们-没有结果……最后我将它们全部删除了……但是主要按钮的外观仍然相同。怎么样？为什么？

摆脱主要按钮的视觉外观的唯一原因是通过删除（例如admin / src / containers / AuthPage下index.js中的登录页面->）“主要”按钮声明

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

但这不是我想要的。我想自定义例如主要按钮。没有摆脱它。

我在stackoverflow上搜索了bandi定制或ui问题，但是找不到解决方案。我发现了许多覆盖自举CSS的策略，例如： How can I override Bootstrap CSS styles?

但是手腕SCSS似乎有些不同，我显然还不明白。

如果有人有想法或已经重写了例如主按钮-请让我知道。

谢谢，史蒂夫。

Answer 1

您有两种方法可以覆盖按钮的默认样式

您可以将style道具传递给组件

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

您可以传递自定义的className道具：

为此，您需要在“ plugins / users-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} />
  );
}

如何覆盖皮带“主按钮”

1 个答案: