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

sergeytolkachyov profile image

Preparing extensions for Joomla 6. CMSObject -> stdClass.

Sergey Tolkachyov -

atharvgyan profile image

JavaScript interview questions & answers with code

Atharv Gyan -

lovestaco profile image

Why Global Standards of API Design Save Your Team Time

Athreya aka Maneshwar -

mesonu profile image

12 New JavaScript Features Every Developer Should Know

Sonu kumar -