《React三问》 -- React样式处理

React 组件最终会生成 HTML,所以你可以使用给普通 HTML 设置 CSS 一样的方法来设置样式。此外,React组件还增加了行内样式 – React组件内置了prop – style 可以快速方便地给组件添加行内样式。 也就是说,React支持两种指定样式方式

  • css样式
组件CSS
1
2
3
4
5
6
.star {
background-color: grey;
}
.star.selected {
background-color: red;
}
组件使用className指定样式
1
2
3
import './star.css';

const component = <Star className={(selected ? 'star selected' : 'star')}
  • 行内样式
行内样式
1
2
3
4
5
6
const Styles = {
buttonStyle: {
color: '#fff'
}
}
const component = <Component style={Styles.buttonStyle} />;

关于样式,还有一些需要知道的细节

1 React的长度单位

对于UI样式来说,明确长度单位是第一要素,因为一个UI组件要展示出来,width & height是非常关键的。

React默认的长度单位是px。React 会自动添加 ”px” 后缀到内联样式为数字的属性后。如需使用 ”px” 以外的单位,请将此值设为数字与所需单位组成的字符串

React的长度单位示例
1
2
3
4
5
6
7
8
9
// Result style: '10px'
<div style={{ height: 10 }}>
Hello World!
</div>

// Result style: '10%'
<div style={{ height: '10%' }}>
Hello World!
</div>

2 引用

  1. 《谈一谈 Normalize.css》- 会飞的贼xmy
坚持原创技术分享,您的支持将鼓励我继续创作!