《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