我正在使用Semantic UI React 并试图找出覆盖默认样式的最佳方法，以便我可以更改卡片的外观和整体主题。
选项 1 似乎是定义我的 CSS 并在每条规则之后加上 !important，这不是很好。
选项 2 是主题支持，这听起来像是我想要的，但我无法确定如何开始使用它。我的应用程序正在使用 CRA，我在更改我的 webpack 配置文件（我没有）之间的文档中有点迷失，2017 年过时的博客文章建议我安装一堆目的不明的模块，和theming site itself，它建议我定义灵活的变量文件（我喜欢的一种方法）。
我无法确定为什么我的主题文件没有被拾取，而且似乎需要进行某种构建修复，但主题指南未涵盖。
在使用 CRA 构建过程时，使主题化工作的最佳方式是什么？ (./node_modules/.bin/react-scripts build)
【问题讨论】：
标签： css semantic-ui-react
当您拥有来自语义 ui、引导程序、角度材质 ui 等的 CSS 文件时，仅举几例。当您想要覆盖任何元素的 css 时，您在 html 中呈现或放置 css 文件的顺序决定了优先级。
要让您的 css 文件覆盖其他 css 文件，请在底部列出您的 css 文件。 当然，请确保您的 css 选择器以您想要覆盖的元素为目标。
一张图值一千字
假设你想从语义 ui 覆盖下面这个
<!-- from semantic-ui.min.css file or cdn -->
@media only screen and (min-width: 1200px) {
.ui.container {
max-width: 768px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
<!--override in my-custom-ui.css file --->
@media only screen and (min-width: 1200px) {
.ui.container {
max-width: 360px !important;
margin-left: 10px !important;
margin-right: 10px !important;
}
}
<!--this is where precedence is set, the last css file has the highest precedence-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>my title</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css"
/>
<!-- place your css file containing css overridden for semantic ui elements or other css at the bottom -->
<link rel="stylesheet" href="my-custom-ui.css" />
</head>
<body>
<header>
My header
</header>
<content>
My content
</content>
<footer>
My footer
</footer>
</body
<script/>
</html>
【讨论】：
实际上你不应该使用!important，除非你真的也有。除了让你的样式看起来很丑之外，让你的所有样式都变成一个非常糟糕的做法!important
既然你提到了支持 SCSS 模块的 CRA，我可以告诉你，我认为还有第三种选择更好。
这里只需 3 个简单的步骤：
1.在层次结构中的某个较高位置设置一个 id。我在body标签上的public/index.html做：
// public/index.html
...
<body id='app'>
...
2。创建一个 SCSS 模块文件并将所有类包装在 :global(#app)
// src/page.module.scss
:global(#app) {
.container {
padding: 2rem;
}
.button {
font-size: 3em;
}
}
3.导入样式并将它们传递给语义组件
// src/page.jsx
import React from 'react';
import { Button, Container } from 'semantic-ui-react';
import styles from './page.module.scss'
const Page = () => (
<Container className={styles.container}>
<Button className={styles.button} />
</Container>
)
之所以可行，是因为page.module.scss SCSS 模块的输出将被编译为：
#app .page_container_2oYQ {
padding: 2rem;
}
#app .page_button_2oYQ {
font-size: 3em;
}
如您所见，它将在模块化类名之前添加 #app id 选择器，这将增加选择器的特异性，进而覆盖语义 UI 选择器。
【讨论】：
特异性为王。只有当存在内联样式并且库没有公开以某种方式关闭属性的方法（糟糕的架构选择）时才需要使用!important。
以下选择器类型列表按具体情况增加：
类型选择器（例如 h1）和伪元素（例如 ::before）。
类选择器（例如，.example），属性选择器（例如， [type="radio"]) 和伪类（例如 :hover）。
ID 选择器（例如， #示例）。
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
看一下语义 UI here 的第一个 UI 按钮，它由以下 HTML 组成：
<button class="ui button">Click Here</button>
CSS 通过 semantic.min.css 附加：
.ui.button {
cursor: pointer;
display: inline-block;
min-height: 1em;
outline: 0;
border: none;
vertical-align: baseline;
background: #e0e1e2 none;
color: rgba(0,0,0,.6);
font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
margin: 0 .25em 0 0;
padding: .78571429em 1.5em .78571429em;
text-transform: none;
text-shadow: none;
font-weight: 700;
line-height: 1em;
font-style: normal;
text-align: center;
text-decoration: none;
border-radius: .28571429rem;
-webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
will-change: '';
-webkit-tap-highlight-color: transparent;
}
要覆盖字体颜色，我们所要做的就是编写一个比这个选择器更具体的选择器。我们可以通过将它们的两个类选择器（同样特定）与一个类型选择器（附加特定性）组合来实现这一点。
这看起来像：
button.ui.button {
color: red;
}
现在由于button.ui.button 比.ui.button 更具体地描述了页面（DOM）中元素的位置，这向浏览器发出信号，该样式应覆盖先前的声明。这是自定义主题的常用方法。
这里有很棒的文档： https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
.ui.button {
cursor: pointer;
display: inline-block;
min-height: 1em;
outline: 0;
border: none;
vertical-align: baseline;
background: #e0e1e2 none;
color: rgba(0,0,0,.6);
font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
margin: 0 .25em 0 0;
padding: .78571429em 1.5em .78571429em;
text-transform: none;
text-shadow: none;
font-weight: 700;
line-height: 1em;
font-style: normal;
text-align: center;
text-decoration: none;
border-radius: .28571429rem;
-webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
will-change: '';
-webkit-tap-highlight-color: transparent;
}
button.ui.button {
color: red;
}<button class="ui button">Click Here</button>【讨论】：
!important 吗？或者有没有办法覆盖!important 而不必声明另一个!important 规则？