时间戳

首页 > 解决方案 > 使用 `css` 属性样式化 React 组件

css - 使用 `css` 属性样式化 React 组件

问题描述

我知道这必须是这样，可以避免仅使用内联样式（通过style属性）覆盖任何组件（DOM节点）样式，而是通过属性使其更具可读性和清洁css性。例如：

<StyledInput 
  css="width: 300px; border: 2px solid red"
  value={state.value}
  onChange={...}
  ...
/>

不幸的是，我找不到此解决方案的任何参考资料。它可能与样式化组件有关。

标签： cssreactjsstyled-components

解决方案

您可以使用第三方 npm 包transform-css-to-js

在终端

npm i transform-css-to-js

在您的父文件中

<StyledInput 
  css=`width: 300px; border: 2px solid red`
  value={state.value}
  onChange={...}
  ...
/>

注意：这里用的是backticks代替string

在您的 StyledInput 文件中

import cssToJS from "transform-css-to-js";
import {TextInput} from 'react-native';
//other imports here

const StyledInput = (props)=> {
  const transformedCSS = cssToJS(props.css, true);
  return (
    <TextInput {...transformedCSS} />
  )
};

注意：这里我假设您想在 TextInput 中使用 css 样式，而不是在 View 或其他一些标签中。请记住 TextInput 仅将有限数量的样式选项用作 props。RN 官方文档有允许的道具列表。如果您想在视图中使用它，那么只需像这样传播它

<View style={{...transformedCSS}}>
</View>

推荐阅读