如何在React的CSS文件中使用Tachyons并自定义类？

下面提供几种可行的方式，帮你在CSS文件中自定义类并复用Tachyons的样式，用单个类名替代多个Tachyons类：

1. 使用Sass/SCSS的@extend（最贴近你的需求） #

Tachyons提供了SCSS源码版本，你可以借助Sass的@extend特性直接复用它的类样式：

操作步骤： #

• 安装Sass（若React项目未配置）：

  npm install sass --save-dev
  

• 安装Tachyons的SCSS版本：

  npm install tachyons-scss --save
  

• 在SCSS文件中导入Tachyons源码，定义自定义类并使用@extend：

  // 导入Tachyons SCSS源码
  @import "~tachyons-scss/src/tachyons";
  
  .example {
    @extend .f4;
    @extend .bg-green;
    @extend .blue;
  }
  

• 在React组件中直接使用自定义类：

  <div>
    <div className="example">Example</div>
  </div>
  

2. 使用PostCSS的postcss-extend-rule插件 #

如果偏好纯CSS语法，PostCSS的postcss-extend-rule插件可以实现类似的类复用功能：

操作步骤： #

• 安装插件及依赖：

  npm install postcss postcss-extend-rule postcss-loader --save-dev
  

• 项目根目录创建postcss.config.js配置文件：

  module.exports = {
    plugins: [
      require('postcss-extend-rule')
    ]
  };
  

• 在CSS文件中使用@extend（需确保Tachyons CSS已引入项目）：

  .example {
    @extend .f4;
    @extend .bg-green;
    @extend .blue;
  }
  

• React组件中直接使用自定义类即可。

3. 纯CSS手动复用（无需预处理器） #

如果不想依赖工具，可直接将Tachyons对应类的样式属性复制到自定义类中：

.example {
  /* 对应.f4的样式 */
  font-size: 1.25rem;
  /* 对应.bg-green的样式 */
  background-color: #228c22;
  /* 对应.blue的样式 */
  color: #0074d9;
}

这种方式直接简单，但如果Tachyons样式更新，需要手动同步自定义类的属性，适合简单场景。

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