当前第2页 返回上一页
3、使用classnames动态修改样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import React, { Fragment } from "react";
import classNames from 'classnames'
class Style extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Fragment>
<h1 className={classNames('textColor', {'textContent': false} ,{'textTitle': true})}></h1>
</Fragment>
);
}
}
export default Style;
|
这种动态修改样式的方式,需要安装插件classnames.上面的代码中,h1标签的类有textColor和textTitle.项目中一般也会使用.
4、使用styled-components插件写标签样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import React, { Fragment } from 'react'
import styled from 'styled-components'
const Title = styled.h1`
color: #f00;
`
class Style extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<Fragment>
<Title>复习style</Title>
</Fragment>
)
}
}
export default Style
|
使用styled-components给标签写样式,首先需要安装该插件.上面的代码是定义一个Title,通过styled给h1标签设置样式,然后在组件中使用的Title就相当于写过样式的h1标签.这种方式在大项目中比较常见.
相关免费学习推荐：javascript（视频）
以上就是react怎么写style的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
React设置文件路径别名的具体方法你知道么
React有哪几种传递参数的方式
React如何区分class和function定义的组件
html style标签是什么意思？关于style标签的使用方法详解
React中monent如何获取日期？
React创建组件的三种方式是什么
React怎么显示隐藏
redux和React有啥区别
React开发框架有哪些？
React中的refs是什么
更多相关阅读请进入《React》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » react怎么写style
