react 组件怎么添加样式? 下面本篇文章给大家介绍一下 React 组件添加样式的四种方式. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
React 组件添加样式的四种方式
第一种: 行内样式
想给虚拟 dom 添加行内样式, 需要使用表达式传入样式对象的方式来实现:
- // 注意这里的两个括号, 第一个表示我们在要 JSX 里插入 JS 了, 第二个是对象的括号
- <p style={
- {
- color:'red', fontSize:'14px'
- }
- }>Hello world</p>
行内样式需要写入一个样式对象, 而这个样式对象的位置可以放在很多地方, 例如 render 函数里, 组件原型上, 外链 JS 文件中
第二种: className(外部引用)
React 推荐我们使用行内样式, 因为 React 觉得每一个组件都是一个独立的整体
其实我们大多数情况下还是大量的在为元素添加类名, 但是需要注意的是, class 需要写成 className(因为毕竟是在写类 JS 代码, 会收到 JS 规则的限制, 而 class 是关键字)
<p className="hello" style = {this.style}>Hello world</p>
第三种: classname/classnames 第三方包定义类名
有时候需要根据不同的条件添加不同的样式, 比如: 完成状态, 完成是绿色, 未完成是红色. 那么这种情况下, 我们推荐使用 classname/classnames 这个包:
- <p
- className = {
- classname({
- size: true,
- bg: true
- })
- }
> 第三包 classname 定义 </p>
第四种: 样式组件 (styled-components)
styled-components 是针对 React 写的一套 CSS-in-JS 框架, 简单来讲就是在 JS 中写 CSS.NPM 链接
styled-components 是一个第三方包, 要安装
- const Container = styled.div`
- width: 100px;
- height: 100px;
- background: pink;
- color: white;
- `
来源: http://www.css88.com/qa/react/18693.html