DEV Community

ccsunny
ccsunny

Posted on

React中编写样式的方式

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

内联样式(Inline styles) 

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

CSS样式表(CSS stylesheets) 

/* styles.css */
.text {
  color: blue;
  font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode 
import './styles.css';

<div className="text">Hello</div>
Enter fullscreen mode Exit fullscreen mode

CSS Modules 

/* Text.module.css */
.text {
  color: green;
  font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode 
import styles from './Text.module.css';

<div className={styles.text}>Hello</div>
Enter fullscreen mode Exit fullscreen mode

Sass/SCSS 

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

.text {
  color: $color;
  font-size: 20px; 
}
Enter fullscreen mode Exit fullscreen mode

Styled Components 

import styled from 'styled-components';

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

<Text>Hello</Text>
Enter fullscreen mode Exit fullscreen mode

Emotion 

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

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

<div css={textStyle}>Hello</div>
Enter fullscreen mode Exit fullscreen mode

Tailwind CSS 

<div className="text-pink-500 text-xl">
  Hello 
</div>
Enter fullscreen mode Exit fullscreen mode

Radium 

import Radium from 'radium';

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

<div style={styles.text}>Hello</div>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

mandala profile image

Lesson 3: "Configuring Git and a Basic CI/CD Pipeline on Your Own Server"

Mandala -

saquibe profile image

Mastering React Context API: The Secret to Clean and Scalable State Management

Mohammad Saquib -

slotbite profile image

🚀 Never Lose Your Clipboard History Again on Windows!

Cristián Andrés -

nina_baghdasaryan_cfdee7e profile image

Learn Rust in 3 Months

Nina Baghdasaryan -