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>
Top comments (0)