这次给大家带来react.js中的css使用，使用react.js中的css注意事项有哪些，下面就是实战案例，一起来看一下。
内联样式 (网页开发不推荐使用,不过在react-native中大量使用)
缺点是动画、伪类 (hover) 等不能使用
import react from 'react';export default class componentheader extends react.component {
render() { const stylecomponentheader = { header: { backgroundcolor: '#333333', color: '#ffffff', padding-top: '15px', paddingbottom: '15px'
}, // 还可以定义其他的样式
}; return ( 71b9d60c9df848daff756a5448765378
4a249f0d628e2318394fd9b75b4636b1这里是头部473f0a7621bec819994bb5020d29372a
ab946e7546ab66a280dd9c9f9310ecd5
)
}
}
2.内联样式中的表达式:当点击时,padding-top和paddingbottom变大或变小
import react from 'react';export default class componentheader extends react.component {constructor() { super(); this.state = { miniheader: false
};
}
switchheader() { this.setstate({ miniheader: !this.state.miniheader
});
};
render() { const stylecomponentheader = { header: { backgroundcolor: '#333333', color: '#ffffff', "padding-top": this.state.miniheader ? '3px' : '15px', paddingbottom: this.state.miniheader ? '3px' : '15px'
}, // 还可以定义其他的样式
}; return ( <header style={stylecomponentheader.header} onclick={this.switchheader.bind(this)}>
<h1>这里是头部</h1>
</header>
)
}
}
3.css模块化
先npm以下三个插件
"babel-plugin-react-html-attrs": "^2.0.0","style-loader": "^0.13.1","css-loader": "^0.25.0"
使用了babel-plugin-react-html-attrs插件,当给标签添加class就可以直接使用class了
<h1 class="smallfontsize">这里是头部</h1>
未使用该插件之前不能使用 class,只能使用classname
<h1 classname="smallfontsize">这里是头部</h1>
4.jsx 样式和 css 样式的互转
将右侧的代码复制到要使用的地方,具体使用如下:
import react from 'react';export default class componentfooter extends react.component {
render() { var footerconvertstyle = { "minifooter": { "backgroundcolor": "#333333", "color": "#ffffff", "paddingleft": "20px", "paddingtop": "3px", "paddingbottom": "3px"
}, "minifooter_h1": { "fontsize": "15px"
}
} return ( <footer style={footerconvertstyle.minifooter}>
<h1 style={footerconvertstyle.minifooter_h1}>这是页脚, 一般放置版权的一些信息.</h1>
</footer>
)
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue.js使用过渡动画制作路由跳转动画
vue.js的路由命名和命名视图
vue.js的路由参数
以上就是react.js中的css使用的详细内容。