React 內联式样

React 內联式样

通过header.js演示JSX样式控制,直接內联到标签中的style
import React from 'react';
export default class CompomentHeader extends React.Component{

render(){
const styleComponentHeader = {
header: {
backgroundColor: "#333333",
color: "#ffffff",
"padding-top": "15px",
paddingBottom: "15px"
}
//还可以定义其他的样式
}
return(
header style={styleComponentHeader.header}>
h1>这里是表头</h1
</header
)
}
}
在React上不是很适合此方法，hover等一些动画或者伪类，但在移动开发ReactNative中会常用。
采用原始引用方式

header添加为header style={styleComponentHeader.header} className="smallFintSize">，并在index.html引用相关css
不好在于污染全局