react 原子样式写法

React 中使用原子样式写法

原子样式(Atomic CSS)是一种将样式分解为最小可复用单元的CSS编写方法。在React中，你可以通过以下几种方式实现原子样式：

1. 使用Tailwind CSS

Tailwind是目前最流行的原子CSS框架之一：

import React from 'react';

function Button() {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      点击我
    </button>
  );
}

2. 使用CSS-in-JS库实现原子样式

使用styled-components

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  
  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return <Button>点击我</Button>;
}

使用Emotion

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

const buttonStyle = css`
  background-color: blue;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  
  &:hover {
    background-color: darkblue;
  }
`;

function Button() {
  return <button css={buttonStyle}>点击我</button>;
}

3. 使用原子CSS实用工具库

使用classnames库组合原子类

import React from 'react';
import classNames from 'classnames';

function Button({ primary }) {
  const classes = classNames(
    'padding-sm',
    'text-white',
    'border-radius-md',
    {
      'bg-blue': primary,
      'bg-gray': !primary
    }
  );
  
  return <button className={classes}>点击我</button>;
}

4. 自定义原子样式系统

你可以创建自己的原子样式系统：

// styles/atomics.js
export const atomicStyles = {
  // 间距
  p1: { padding: '0.25rem' },
  p2: { padding: '0.5rem' },
  
  // 颜色
  bgBlue: { backgroundColor: 'blue' },
  textWhite: { color: 'white' },
  
  // 其他
  rounded: { borderRadius: '0.25rem' }
};

// 组件中使用
function Button() {
  return (
    <button style={{ ...atomicStyles.p2, ...atomicStyles.bgBlue, ...atomicStyles.textWhite }}>
      点击我
    </button>
  );
}

5. 使用TypeStyle (TypeScript友好)

import { style } from 'typestyle';

const buttonClass = style(
  {
    backgroundColor: 'blue',
    color: 'white',
    padding: '0.5rem 1rem',
    borderRadius: '0.25rem',
    $nest: {
      '&:hover': {
        backgroundColor: 'darkblue'
      }
    }
  }
);

function Button() {
  return <button className={buttonClass}>点击我</button>;
}

最佳实践建议

1. 一致性：保持原子类的命名和使用方式一致
2. 可维护性：当项目变大时，考虑使用设计系统或样式指南
3. 性能：对于大型应用，CSS-in-JS可能会有性能开销
4. 组合：将原子类组合成可复用的组件样式
5. 主题：使用CSS变量或主题提供者来实现主题切换

原子样式的主要优点是减少了CSS的冗余，提高了样式的复用性，但也可能导致HTML类名过多。根据项目规模和团队偏好选择合适的方法。