styles是什么？

2024-08-08 @1uokun

CSS-in-JS是什么？

在聊styles是什么之前，我们先简单了解CSS-in-JS是什么？

CSS-in-JS是一种将CSS样式直接编写在JavaScript代码中的技术，使得开发者能够在JavaScript文件中定义和使用样式。

常见的CSS-in-JS库包括：

Styled-Components: 允许你使用ES6的模板字符串语法定义样式。
Emotion: 提供了高性能和灵活的API来写CSS。
JSS: 通过JavaScript对象定义样式，并将其动态注入到DOM中。

而React-Native根据官网描述，

在React-native中，样式是通过JavaScript来实现的，所有的核心组件都接受名为style的属性。
为应对实际开发中组件的样式会越来越复杂，建议使用StyleSheet.create来集中定义组件的样式。
via

举一个基础案例：

const Button = ({ children }) => {
  return (
    <TouchableHighlight style={styles.myButton}>
      {children}
    </TouchableHighlight>
  )
}

const styles = StyleSheet.create({
  myButton: {
    height: 47,
    backgroundColor: '#108ee9',
  },
})

这就是天生的且只能支持CSS-in-JS了。

其中StyleSheet.create的设计是类似于react-jss，属于CSS-in-JS中的JSS（JavaScript Style Sheets）一类，他们有着以下的优势：

动态值

创建一个 useStyles hook函数，接收一个props对象，并返回StyleSheet.create的对象。

这样样式中就可以使用来自组件props对象：

const Button = ({children, ...props}) => {
  const styles = useStyles(props)
  return (
    <TouchableHighlight style={styles.myButton}>
      {children}
    </TouchableHighlight>
  )
}

// create useStyles hooks
const useStyles = (props) =>
  StyleSheet.create({
    myButton: {
      height: props.height, // 来自组件的 `height` prop
      backgroundColor: '#108ee9',
    },
  })

主题化

使用Context统一维护所有主题变量（ThemeContext），即用ThemeContext.Provider包装你的应用程序并将theme对象传递给ThemeContext.Provider。

随后创建一个 useTheme hook函数，返回theme对像；同时将theme对象也入参到 useStyles hook函数中。

const Button = ({ children, ...props }) => {
  const theme = useTheme()
  const styles = useStyles({...props, theme})
  return (
    <TouchableHighlight style={styles.myButton}>
      {children}
    </TouchableHighlight>
  )
}

export const App = () => {
  const theme = {
    colorPrimary: '#108ee9',
  }
  return (
    <ThemeContext.Provider theme={theme}>
      <Button height={47}>I am a button</Button>
    </ThemeContext.Provider>
  )
}

// create ThemeContext & useTheme hooks
const ThemeContext = React.createContext({})
const useTheme = () => {
  return React.useContext(ThemeContext)
}


// useStyles hooks
const useStyles = ({...props, theme}) =>
  StyleSheet.create({
    myButton: {
      height: props.height, // 来自组件的 height prop
      backgroundColor: theme.colorPrimary, // 来自ThemeContext变量
    },
  })

CSS-in-JS 的困境

当我们想在外部为Button组件添加padding样式时，需要重新设计Button组件，改动内部的源码:

export const App = () => {
  return (
-    <Button>I am a button</Button>
+    <Button padding={7}>I am a button</Button>
  )
}

const useStyles = (props) =>
  StyleSheet.create({
    myButton: {
      height: props.height,
+      padding: props.padding
    },
  })

大致方案为：

添加足量的style类props
添加足量的token css变量

这是可以遇见的徒增维护成本。那么如何实现像CSS那样可以用外部样式覆盖呢？