使用ReactJs React-Bootstrap 构建网站（3）：主题色设置

主题色设置

定义主题色

定义主题色的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)}>

小结

以后只需要更改主题色文件，则网站的风格就全部变换过来了。