如何在React中避免使用内联CSS？含动态样式场景示例

1. 用CSS变量（Custom Properties） #

这是最灵活的方案，把动态数值转成CSS变量注入元素，样式逻辑依然写在CSS文件里。

React代码：

const stylesObj = { width: 10, height: 20 };

<div 
  className="point-class"
  style={{
    '--point-width': `${stylesObj.width}px`,
    '--point-height': `${stylesObj.height}px`
  }}
></div>

对应的CSS：

.point-class {
  width: var(--point-width);
  height: var(--point-height);
}

只需要传递少量的CSS变量，不用写一堆内联样式属性。

2. 用CSS-in-JS库（比如Styled Components） #

如果项目已经在用CSS-in-JS工具，直接把动态值当props传给样式组件就行，完全不用写内联style。

示例代码：

import styled from 'styled-components';

// 定义样式组件
const Point = styled.div`
  width: ${props => props.width}px;
  height: ${props => props.height}px;
`;

// 使用组件
const stylesObj = { width: 10, height: 20 };
<Point width={stylesObj.width} height={stylesObj.height} />

3. 动态拼接类名（适合有限枚举值） #

如果你的动态数值是有限的固定范围，可以用Sass/Less预先生成对应类名，然后在React里拼接类名。

比如用Sass循环生成类：

@for $i from 1 through 50 {
  .point-w-#{$i} { width: #{$i}px; }
  .point-h-#{$i} { height: #{$i}px; }
}

React中使用：

const stylesObj = { width: 10, height: 20 };

<div 
  className={`point-class point-w-${stylesObj.width} point-h-${stylesObj.height}`}
></div>

注意：这种只适合数值在预定义范围内的场景，任意数值的话就不适用了。

4. 用CSS-in-JS的属性注入（比如Emotion） #

像Emotion这类库支持直接把动态样式逻辑通过css属性注入，写法比内联style更整洁。

示例：

import { css } from '@emotion/react';

// 定义动态样式函数
const pointStyle = (width, height) => css`
  width: ${width}px;
  height: ${height}px;
`;

// 使用
const stylesObj = { width: 10, height: 20 };
<div className="point-class" css={pointStyle(stylesObj.width, stylesObj.height)}></div>

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