我正在使用Semantic UI React并试图找到覆盖默认样式的最佳方法,以便我可以更改卡片的外观和整体主题。
选项1似乎是定义我的CSS并在每个规则之后放置!重要,这不是很好。
选项2是主题支持,听起来像我想要的,除了我无法确定如何开始。我的应用程序正在使用CRA,我在更改我的webpack配置文件(我没有)之间的文档中有点丢失,2017年过时的博客帖子建议我安装一堆目的不明确的模块,和theming site itself建议我定义灵活的变量文件(我喜欢的方法)。
我无法确定为什么我的主题文件没有被拾取,并且看起来某种构建修复是必要的,主题指南没有涵盖。
在使用CRA构建过程时,让主题工作的最佳方法是什么? (./node_modules/.bin/react-scripts build
)
特殊性是王道。只有时间需要使用!important
才会出现内联样式,并且库没有暴露出以某种方式关闭属性的方法(糟糕的架构选择)。
以下选择器类型列表按特定方式增加:
类型选择器(例如,h1)和伪元素(例如,:: before)。
类选择器(例如,.example),属性选择器(例如,[type =“radio”])和伪类(例如,:悬停)。
ID选择器(例如,#example)。
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;
}
要覆盖say,字体颜色,我们所要做的就是编写一个比这个选择器更具体的选择器。我们可以通过将它们的两个类选择器(同样具体)与类型选择器(附加特异性)组合来实现这一点。
这看起来像:
button.ui.button {
color: red;
}
现在,因为button.ui.button
更具体地描述了页面中元素的位置(DOM),而不仅仅是.ui.button
,这向浏览器发出信号,表明这种风格应该覆盖之前的声明。这是自定义主题的常用方法。
很棒的文档: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>
当你有来自语义ui,bootstrap,angular material ui等的CSS文件时,仅举几例。如果要覆盖任何元素的css,则在html中呈现或放置css文件的顺序决定了优先级。
为了你的css文件覆盖其他一些css文件列表你的底部。当然要确保你的css选择器以你想要覆盖的元素为目标。
一张图片胜过1000字
假设您想要从语义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>