React style设置

react中样式的设置与css样式设置略有不同,主要有以下4种情况。

1、一致:
widthheightdisplay等。
单个单词组成的样式命名不变。

2、-变驼峰:
background-color->backgroundColormargin-top->marginTopflex-direction->flexDirection等。
多个单词组成的样式,去掉-,改为驼峰表达。

3、拆分:
border: 1px solid red;->borderWidth: 1,borderColor: '#e4e4e4',borderStyle: 'solid'
这种其实原理和第一种一样,在使用的时候,可以拆分设置。

4、强用:
box-shadow: 0px 5px 10px red->boxShadow: '0 5px 10px red'
当需要传多个参数又没法拆分的事件,直接强用。

以上。备忘。

你可能感兴趣的:(React style设置)