如何自定义语义 UI 按钮（背景颜色、边框半径等）

Question

<button class="ui button create-new-menu-btn">Create New Menu</button>

. create-new-menu-btn {
    border-radius: 0;
    background-color: red;
}

以上代码无效

Answer 1

您需要使您的自定义属性比语义正在使用的属性更具体。特异性的工作原理（简单地）是当同一元素上存在竞争属性值时，选择更多 "specific" 的值。

阅读此内容以了解更多关于 CSS 特异性的信息：https://developer.mozilla.org/en/docs/Web/CSS/Specificity

针对您的特定问题：

使自定义 CSS 更具体的一种方法是在页面的 body 标记中使用 id，并使用以下 select 或：

方法一

#bodyid .create-new-menu-btn {
    //Properties
}

另一种方法是简单地向您想要的元素添加一个 id select

方法二

#create-new-menu-btn {
}

当你想在多个元素上应用属性时首选方法 1（因此使用 class）（就像页面上的多个评论按钮）

当只有一个元素要被 selected 时，首选方法 2。（就像 header 中的 login/signup 按钮）

Answer 2

#bodyId .ui.create-new-menu-btn {
border-radius: 0;
background-color: red;

}

它将以 ui class 的所有按钮为目标。

希望有用:)

Answer 3

您还可以在您自己的 ui 之前添加语义 ui 以明确说明。例如：如果您的 className 是 .create-new-menu-btn 您可以在 ui.button 之前添加 css 或 scss 或您需要的任何其他语义 ui 特定类别。所以最后，您在 css 中的 class 定义将如下所示：

ui.button.create-new-menu-btn {
  ....
}

Answer 4

如果使用 JSX，您可以对目标元素使用内联样式

示例：

<Button style={{backgroundColor: 'red', borderRadius: 0}}> View Created </Button>

Answer 5

将 .ui.button 放在你的 class 名字前面 create-new-btn。它应该如下所示

.ui.button.create-new-btn {
  //Your css code
}

然后在您的 html/jsx 模板中，您可以使用 class 名称 create-new-btn，如下所示：

<Button class="create-new-btn"/>
or for Jsx
<Button className="create-new-btn"/>

如何自定义语义 UI 按钮（背景颜色、边框半径等）

How to customize the Semantic UI buttons(background-color, border-radius and all)

semantic-ui