1.1 style.module.css的使用
.title {
color: blue;
}
1.2. index.js文件引入
import React, { PureComponent } from 'react';
// 引入的方式如下:
import appStyle from './style.module.css';
import Home from '../home';
import Profile from '../profile';
export default class App extends PureComponent {
componentDidMount() {
console.log(appStyle);
}
render() {
return (
<div id="app">
App
<h2 className={appStyle.title}>我是App的title</h2>
<Home/>
<Profile/>
</div>
)
}
}
1.3.这个style.module.css用法不支持 连接符号比如: setting-item 这种是会报错的
1.4 这个style.module.css用法:不支持动态样式邦定, 最后还是需要内联样式来写
2. Styles-components 的使用
2.1 下载 styles-components库
styles-components 下载命令: yarn add styled-components
2.2 导入这个库
import styled from "styled-components"
2.3 简单使用
import React, { PureComponent } from 'react'
import styled from "styled-components"
const HomeWrapper = styled.div`
font-size:50px;
color:red;
`
const TitleWrapper = styled.h2`
text-decoration:underline;
`
export default class Home extends PureComponent {
render() {
return (
<HomeWrapper>
<TitleWrapper>我是Home标题</TitleWrapper>
<h3>我是Home内容</h3>
</HomeWrapper>
)
}
}
实际效果图
image.png
2.4 需要安装一个 vscode-styled-components 插件 会有高亮提示
2.5 类样式的添加
image.png
2.6 伪类和嵌套
image.png
3.0 样式分离的写法
3.1 在当前目录新建一个style.js文件
import styled from "styled-components";
export const HomeWrapper = styled.div`
font-size: 50px;
color: red;
/* 样式嵌套 */
.banner {
font-size: 33px;
background-color: pink;
span {
color: #fff;
&.active {
color: red;
}
&:hover {
color: green;
}
&::after {
content: "aaaaa";
}
}
}
`;
export const TitleWrapper = styled.h2`
text-decoration: underline;
`;
3.2 在home.js文件中引入
import React, { PureComponent } from "react";
import {HomeWrapper,TitleWrapper} from "./style"
export default class Home extends PureComponent {
render() {
return (
<HomeWrapper>
<TitleWrapper>我是Home标题</TitleWrapper>
<h3>我是Home内容</h3>
<div className="banner">
我是样式嵌套 <br/>
<span>测速1</span>
<span>测速2</span>
<span>测速3</span>
<span>测速4</span>
</div>
</HomeWrapper>
);
}
}
效果同上截图一样了
3.3 样式的属性有两种写法
第一种是直接在组件上加属性就行了,因为它有穿透功能
image.png
第二种是加上attrs函数来写
image.png
3.4 以上截图的代码
import React, { PureComponent } from "react";
import styled from "styled-components";
const HYProfileInput = styled.input`
background-color: lightblue;
`;
const HYInput = styled.input.attrs({
// 这个地方是 添加元素属性的
placeholder:"请输入姓名",
type:"text"
})`
/* 这个地方是添加元素的样式的 */
background-color: lightblue;
`;
export default class Profile extends PureComponent {
render() {
return (
<div>
<hr/>
{/* 1. */}
<HYProfileInput placeholder="请输入内容"></HYProfileInput>
{/* 2. */}
<HYInput></HYInput>
<h1>我是Profile标题</h1>
<h3>我是Profile内容</h3>
</div>
);
}
}
4. 获取attrs和state里面的数据的写法
import React, { PureComponent } from "react";
import styled from "styled-components";
// 3.
const AInput = styled.input.attrs({
placeholder:"请输入姓名",
type:"text",
BColor: "red"
})`
background-color: lightblue;
border-color: ${props=>props.BColor};
/* 这样就可以获取到state中的数据了 */
color: ${props=>props.color};
`;
export default class Profile extends PureComponent {
constructor(props) {
super(props)
this.state = {
color:"yellow"
}
}
render() {
return (
<div>
<hr/>
{/* 3.获取attrs 和 state里面的数据 */}
{/* 如果想获取state里面的数据的话 需要类似传值的写法就可以了 */}
<AInput color={this.state.color}></AInput>
<h1>我是Profile标题</h1>
<h3>我是Profile内容</h3>
</div>
);
}
}
实际截图
image.png
