这次给大家带来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 ( 这里是头部
) }}
登录后复制
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 ( 这里是头部
) }}
登录后复制
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了
这里是头部
登录后复制登录后复制
未使用该插件之前不能使用 class,只能使用classname
立即学习“前端免费学习笔记（深入）”；
这里是头部
登录后复制登录后复制
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 ( ) }}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Vue.js使用过渡动画制作路由跳转动画
Vue.js的路由命名和命名视图
Vue.js的路由参数
以上就是React.js中的CSS使用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2783364.html
