我正在尝试创建一个应用程序外部的反应组件库。这将是一个使用 Webpack 加载的 npm 模块。我正在使用 CSS 模块为组件设计样式，并且我正在尝试了解如何使其某些属性可定制。例如，背景颜色。
我想为此使用 css 变量，例如在 css 文件中具有以下语法：
.myClass {
backgrond-color: var(--backgroundColor, red);
}
其中 --backgroundColor 是我可以设置的变量，而 red 是默认值。我的问题是，有没有办法在从 .jsx 文件加载变量时将变量传递给 .css 文件？所以我可以将一个变量对象传递给组件，这会影响它如何加载它的样式？我可以为此使用 PostCSS 吗？
谢谢。
PS：我知道这可以通过使用内联 JS 样式来解决，但我想先尝试一下 CSS。
【问题讨论】：
标签： css reactjs postcss css-modules
您不能将 javascript 注入 css 文件，PostCSS 只能转换您的 css 文件，但不能注入/替换变量。
但是，这样做的一种方法是使用默认变量创建 .scss (sass) 文件，例如$background-color: red; 然后可以将您的模块和.scss 文件导入到他们的.scss 文件中，并根据需要用自己的变量覆盖任何变量，如$background-color。
【讨论】：
我不确定我是否理解正确，但这里是我的想法：
当您使用 Webpack 需要 .css 文件时，它会将此 css 作为字符串添加到幕后页面的 <head> 元素中。
你为什么不使用你自己的函数来做 Webpack 所做的事情，就像这样。
你的模块：
import $ from 'jquery';
/* this function builds string like this:
:root {
--bg: green;
--fontSize: 25px;
}
from the options object like this:
{
bg: 'green',
fontSize: '25px'
}
*/
function buildCssString(options) {
let str = ':root {\n'
for(let key in options) {
str += '\t--' + key + ': ' + options[key] + ';\n'
}
str += '}';
return str;
}
/* this function adds css string to head element */
export const configureCssVariables = function(options) {
$(function() {
var $head = $('head'),
$style = $('<style></style>');
$style.text(buildCssString(options));
$style.appendTo($head)
});
}用法：
import {configureCssVariables} from './your-module';
configureCssVariables({
bg: 'green',
fontSize: '25px'
});而且你的 CSS 很简单
/* default variables that will be overwritten
by calling configureCssVariables()
*/
:root {
--bg: yellow;
--fontSize: 16px;
}
.myClass {
backgrond-color: var(--bg);
font-size: var(--fontSize);
}【讨论】：
我实际上找到了一个解决方案，它已经做到了这一点，并利用了最新的标准化 JavaScript 功能
https://github.com/styled-components/styled-components
这可能正是我想要的。
【讨论】：
可以通过在管道中添加 PostCSS 和 postcss-custom-properties 插件来实现。它有一个variables 选项，可以将 JS 定义的变量（属性）注入到任何正在处理的文件中。
这消除了在每个 CSS 模块文件中 @import 任何内容的需要。
const theme = {
'color-primary': 'green',
'color-secondary': 'blue',
'color-danger': 'red',
'color-gray': '#ccc',
};
require('postcss-custom-properties')({
variables: theme,
});
了解如何将它与 babel-plugin-css-modules-transform https://github.com/pascalduez/react-module-boilerplate/blob/master/src/theme/index.js 和 https://github.com/pascalduez/react-module-boilerplate/blob/master/.babelrc#L21 一起使用，但它也适用于 Webpack。
【讨论】：