1

我是一名平面设计师，他必须定制一个用strapi完成的项目——我很迷茫。到目前为止，我设法更改了背景颜色、背景图像 - 没问题。但是：我完全无法自定义主按钮等元素。

我发现了很多类定义“.primary”，改变了它们 - 没有结果......最后我把它们全部删除了......但主按钮仍然看起来一样。如何？为什么？

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

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

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

我在 stackoverflow 中搜索了strapi 自定义或 ui 问题，但找不到解决方案。我发现了很多覆盖引导 CSS 的策略，例如： 如何覆盖引导 CSS 样式？

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

如果有人有想法或已经覆盖到例如主按钮 - 请告诉我。

在此先感谢，史蒂夫。

4

1 回答 1

2

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

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

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

  2. 您可以传递自定义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} />
  );
}
于 2018-09-18T18:11:21.410 回答