Question

我试图建立一个应用程序外部的反应组件库。这将是一个装有Webpack的npm模块。我使用CSS模块为组件设置样式，并且我试图了解如何使其某些属性可自定义。对于instace，背景颜色。

我想使用css变量来获得css文件中的这种语法：

.myClass {
    backgrond-color: var(--backgroundColor, red);
}

- backgroundColor 是我可以设置的变量，红色是默认值。我的问题是，有没有办法在从.jsx文件加载变量时将变量传递给.css文件？所以我可以将变量对象传递给组件，然后它会影响它如何加载它的样式？我可以使用PostCSS吗？

感谢。

PS：我知道这可以通过使用内联JS样式来解决，但我试图先给CSS一个镜头。

Answer 1

你不能将javascript注入到css文件中，PostCSS只能转换你的css文件，但不能注入/替换变量。

但是，这样做的一种方法是使用默认变量创建.scss（sass）文件，例如： $background-color: red;然后，可以将您的模块和.scss文件导入其.scss文件，并根据需要使用自己的变量覆盖$background-color等任何变量。

Answer 2

我不确定我是否理解你，但在这里我在想：

当您要求使用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);
}

Answer 3

可以通过在管道中添加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。

Answer 4

我实际上找到了一个已经做到这一点的解决方案，并利用了最新的标准化JavaScript功能

https://github.com/styled-components/styled-components

这可能正是我所寻找的。

使用React和CSS Modules / PostCSS制作可自定义的css属性

4 个答案: