如何在其他CSS文件中使用React Bootstrap自定义主题的配色变量

Bootstrap 5及以上版本默认会将所有主题配置变量导出为全局CSS自定义属性，你自定义的primary主色会自动生成--bs-primary变量，直接在任意CSS文件中引用即可：

div {
  color: var(--bs-primary);
}

不需要额外配置，修改主题色时只需调整Bootstrap SCSS的$primary变量，所有引用位置会自动同步，完全无需修改其他CSS代码。

如果你需要在JS逻辑或者CSS-in-JS代码中调用主题变量，可以通过SCSS的:export语法导出变量：

1. 在你的自定义Bootstrap SCSS文件（比如custom-bootstrap.scss）中添加导出配置：

// 先自定义你的主题变量
$primary: #165DFF;
// 导入Bootstrap SCSS
@import "~bootstrap/scss/bootstrap";

// 导出变量到JS
:export {
  primary: $primary;
  secondary: $secondary;
  // 可按需添加其他需要导出的主题变量
}

2. 在JS文件中直接导入该SCSS文件即可获取主题变量：

import bootstrapTheme from './custom-bootstrap.scss';

// 使用示例：行内样式
function Header() {
  return <div style={{ color: bootstrapTheme.primary }}>头部文本</div>
}

如果你使用styled-components、Emotion等CSS-in-JS库，可以直接封装全局主题提供者，实现和MUI makeStyles完全一致的调用体验：

1. 按方案2的方式导出Bootstrap主题变量后，在入口文件包裹ThemeProvider：

import { ThemeProvider } from 'styled-components';
import bootstrapTheme from './custom-bootstrap.scss';

ReactDOM.createRoot(document.getElementById('root')).render(
  <ThemeProvider theme={bootstrapTheme}>
    <App />
  </ThemeProvider>
);

2. 组件中直接从props拿theme变量使用：

import styled from 'styled-components';

const Header = styled.div`
  color: ${props => props.theme.primary};
`;

内容的提问来源于stack exchange，提问作者Conner Williams