css - 语义UI，如何自定义菜单样式？

Question

我第一次在我的 React 应用程序中使用 semantic-ui，我正在使用的确切包:https://react.semantic-ui.com/collections/menu

我正在使用这样的方式呈现我的标题:

  <Menu
    className='header'
  >
    <Container>

使用 scss 导入样式标题，如下所示:

.header {
  background:
    linear-gradient(
      to left,
      rgba(100,97,240,1) 0%,
      rgba(255,203,0,1) 100%
    )
    left
    bottom
    #FFF
    no-repeat;
    background-size:100% 4px;
}

React 是这样渲染组件的:

<div class="ui header menu">
    <div class="ui container">
       ....

问题是导入 SCSS 文件中的 .header 样式被忽略了。虽然我确定我可以在我的 css 文件中添加 !important，但感觉与语义 UI 做的事情是错误的，我想了解正确的方法。

使用 Semantic-UI-React，如何使用所需的样式？我是否需要添加一些 menu.variables 或 menu.overrides 等？

Answer 1

我不确定您是否可以使用 className 自定义 css。您可以将样式 Prop 用于自定义 css。 您可以使用本指南自定义默认样式: React Semantic-UI customized

此外，如果您在生成 semantic.min.css 时遇到任何问题 文件你可以引用这个问题:gulp build is not building semantic.min.css