React(八)CSS
发布时间:2020-12-15 20:22:46 所属栏目:百科 来源:网络整理
导读:(1)内联样式 注:样式要采用驼峰命令发,如果非要使用原生css样式写法,需加引号 缺点:一些动画,伪类不能使用 class App extends Component { constructor(props) { super(props); this .state = {date: new Date()}; } render() { const styleCss = { h
(1)内联样式 注:样式要采用驼峰命令发,如果非要使用原生css样式写法,需加引号 缺点:一些动画,伪类不能使用 class App extends Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { const styleCss = { header : { color: ‘red‘,backgroundColor: ‘#ccc‘,"padding-top": ‘20px‘,paddingBottom: ‘20px‘ } } return ( <div className="App"> <p style={styleCss.header}>这是一段文字,哈哈</p> </div> ); } } ? 内联样式中的表达式: class App extends Component { constructor () { super(); this.state = { minHeader: false }; }; switchHeader () { this.setState({ minHeader:!this.state.minHeader }) } render() { const styleCss = { header: { cursor: ‘pointer‘,backgroundColor: ‘red‘,color: ‘#fff‘,padding: (this.state.minHeader) ? ‘10px‘ : ‘30px‘ } }; return ( <div className="App"> <p style={styleCss.header} onClick={this.switchHeader.bind(this)}>这是一段文字,哈哈</p> </div> ); } } ? (2)引入css文件 在该文件夹下使用import引入或者在index.html上面使用link引入 注:给html标签添加class属性需使用className import ‘./style/style.css‘ //创建的css文件 class App extends Component { render() { return ( <div> <p className="blueColor">这是一段文字,哈哈</p> </div> ); } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |