使用TSDX搭建React组件库导入CSS报Invalid property value如何解决

1 修复CSS语法错误 #

样式失效的核心原因是原生CSS属性值不需要加单引号，你写的CSS里所有属性值都套了多余的引号，导致浏览器无法识别属性值，触发invalid property value报错。
把你的button.css修改为如下内容即可生效：

.button {
  background: #97C339;
  border-radius: 30px;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  height: 60px;
  width: 180px;
}

2 检查TSDX打包配置 #

你已经安装了rollup-plugin-postcss，还需要在项目根目录新建tsdx.config.js，添加如下配置让TSDX支持处理CSS文件：

const postcss = require('rollup-plugin-postcss');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        // 样式内联到JS文件中，如需单独导出CSS文件可设置为true
        extract: false,
        // 无需CSS Modules可关闭，需要的话改为true即可
        modules: false,
        minimize: process.env.NODE_ENV === 'production',
      })
    );
    return config;
  },
};

如果修改后Storybook仍未加载样式，可确认.storybook/main.js配置中没有屏蔽CSS文件的加载逻辑，Storybook 6默认已支持直接导入CSS文件。

• 避免全局样式污染：统一给组件类名添加专属前缀（比如组件库名为xxx-ui，类名统一为xxx-button、xxx-input），或使用CSS Modules、CSS-in-JS（styled-components、emotion等）方案，避免组件库样式和用户项目样式冲突
• 支持主题定制：优先使用CSS变量定义核心样式（颜色、圆角、间距等），用户可以直接在项目中覆盖变量值，无需修改组件源码即可实现主题切换
• 样式按需引入：如果采用单独抽离CSS文件的方案，要支持单个组件的样式单独引入，避免强制用户全量导入所有组件样式增大项目体积
• 控制样式优先级：不要滥用!important，保持组件默认样式的优先级足够低，方便用户根据需求覆盖样式
• 适配多种使用场景：打包时支持两种样式导出模式，一种是内联到JS的模式方便用户直接导入组件即可使用，一种是单独抽离的CSS文件方便用户做全局样式处理

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