React中编写样式的方式

8种在React中编写样式的常见方式:

内联样式(Inline styles)

<div style={{ color: 'red', fontSize: '14px' }}>Hello</div>

CSS样式表(CSS stylesheets)

/* styles.css */
.text {
  color: blue;
  font-size: 16px;
}

import './styles.css';

<div className="text">Hello</div>

CSS Modules

/* Text.module.css */
.text {
  color: green;
  font-size: 18px;
}

import styles from './Text.module.css';

<div className={styles.text}>Hello</div>

Sass/SCSS

/* styles.scss */
$color: purple;

.text {
  color: $color;
  font-size: 20px; 
}

Styled Components

import styled from 'styled-components';

const Text = styled.div`
  color: orange;
  font-size: 22px;
`;

<Text>Hello</Text> 

Emotion

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

const textStyle = css`
  color: rebeccapurple;
  font-size: 24px;
`;

<div css={textStyle}>Hello</div>

Tailwind CSS

<div className="text-pink-500 text-xl">
  Hello 
</div>

Radium

import Radium from 'radium';

const styles = {
  text: {
    color: 'salmon',
    fontSize: '26px'
  }
};

<div style={styles.text}>Hello</div>