使用 CSS-in-JS

title: 使用 CSS-in-JS

在 React 社区有一个著名的 CSS-in-JS 解决方案: styled-components。但遗憾的是，styled-components 使用 <style> 标签来动态地控制样式，在小程序没有类似的方案。但我们可以通过 linaria 实现同样的功能，linaria 主要提供以下特性：

• 近似于 styled-components 的 API
• 完整的 TypeScript 支持
• 零运行时

使用 linaria 也非常简单，首先通过 NPM 安装依赖：

$ npm i linaria

其次配置项目根目录的 babel.config.js:

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true
    }],
    'linaria/babel' // 添加到 babel-preset
  ]
}

之后配置 config/index.js

const config = {
  mini: {
    webpackChain(chain, webpack) {
      // linaria/loader 选项详见 https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#webpack
      chain.module
        .rule('script')
        .use('linariaLoader')
        .loader('linaria/loader')
        .options({
          sourceMap: process.env.NODE_ENV !== 'production',
        })
    }
  }
}

最后在项目根目录新建 linaria.config.js

// linaria 配置详见 https://github.com/callstack/linaria/blob/2eaef3f15b/docs/CONFIGURATION.md#options
module.exports = {
    ignore: /node_modules[\/\\](?!@tarojs[\/\\]components)/,
}

在业务代码中我们可以这样使用：

import React from 'react'
import { View } from '@tarojs/components'
import { styled } from 'linaria/react'
const Title = styled(View)`
  color: ${props => props.color}
`;
const Index = () => {
  return <Title color='red'>
    Hello World!
  </Title>
}
export default Index

import React from 'react'
import { View } from '@tarojs/components'
import { styled } from 'linaria/react'
const Title = styled(View)<{ color: string }>`
  color: ${props => props.color}
`;
const Index: React.FC = () => {
  return <Title color='red'>
    Hello World!
  </Title>
}
export default Index