React中设置组件样式一共有两种方式,一种是直接写在组件style属性上的内联样式,另外一种是在组件外定义的外联样式。
内联样式
比较简单,就是将一个css键值对对象赋值给组件的style属性。注意两点,一个是css属性名的写法是js中css属性写法(background-color -> backgroundColor);二是双大括号,因为这里相当于使用到一个变量,外层大括号相当于jsx语法。
{/**1.内联样式 */}
<div
style={{ width: "100px", height: "100px", backgroundColor: "red" }}
></div>
等价于:
const inLineStyle = { width: "100px", height: "100px", backgroundColor: "red" };
return (
<div>
{/**1.内联样式 */}
<div
style={inLineStyle}
></div>
</div>
);
效果:
这种用得不多,设置简单一两条属性还行,多了就影响jsx代码段的观感,临时用用。
另外,内联样式不支持伪类和媒体查询,请使用第三方包如radium以支持。
外联样式
1.最常用的,全局引入css样式文件:
新建同级目录下.css文件
.out-line-box {
width: 100px;
height: 100px;
background-color: hotpink;
}
注意引入css
import "./App.css";
function App() {
return (
<div>
{/**2.外联样式 */}
<div className="out-line-box"></div>
</div>
);
}
export default App;
效果:
这种用得最多,实际工作中,很可能使用到这种的变体,也就是引入scss和less文件,这个大同小异。
2.组件级别引入
如果想控制样式在组件级别,可以这样做:
样式文件名字中间价module,内容不变(变量名貌似不支持-,我改成了下划线_),引入方式变成:
.out_line_box {
width: 100px;
height: 100px;
background-color: hotpink;
}
import style from "./App.module.css";
function App() {
return (
<div>
{/**2.外联样式(组件级别) */}
<div className={style.out_line_box}></div>
</div>
);
}
export default App;
查看元素,发现className变了,加了前后缀:
3.使用styled-components组件
先npm install安装一下
npm i styled-components -S
然后引入,创建:
import styled from "styled-components";
// 自定义标签(首字母大写)
const SectionDiv = styled.div`
width: 100px;
height: 100px;
background-color: hotpink;
`;
function App() {
return (
<div>
{/**2.外联样式(使用styled-components, 可在js中直接写样式创造复合样式的组件) */}
<SectionDiv />
</div>
);
}
export default App;
如果想给这个自定义组件加额外的属性(比如class),可以这样做:
const SectionDiv = styled.div.attrs({
className: "box1 box2",
})`
width: 100px;
height: 100px;
background-color: hotpink;
`;
如果想把所有东西(CSS-IN-JS)都集成到js中,这个方式可以考虑一哈。