react中样式的设置与css样式设置略有不同,主要有以下4种情况。
1、一致:
如width
、height
、display
等。
单个单词组成的样式命名不变。
2、-
变驼峰:
如background-color
->backgroundColor
、margin-top
->marginTop
、flex-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'
当需要传多个参数又没法拆分的事件,直接强用。
以上。备忘。