使用 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