定义主题色的css文件,后缀名为scss.
记得要@import 一下bootstrap
/* make the customizations */
$theme-colors: (
"info": tomato,
"danger": teal
);
/* import bootstrap to set changes */
@import "../node_modules/bootstrap/scss/bootstrap";
引入主题色文件,文件后缀名仍为scss
@import "custom";
.header {
text-align: center;
}
span {
&.dangerText {
color: #dc3545;
}
&.infoText {
color: #17a2b8;
font-weight: bold;
}
}
<Alert variant="danger" onClose={() => setShow(false)} dismissible>
<Button variant="info" onClick={() => setShow(true)}>
以后只需要更改主题色文件,则网站的风格就全部变换过来了。