目录
安装
创建全局样式文件,以js为后缀
组件中使用
为什么使用 style-components?
style-components最基础的用法就是以组件的形式编写样式
安装
npm install styled-components
创建全局样式文件,以js为后缀
// 引入
import styled from 'styled-components'
// 注意,定义首字母 必须大写
const GlobelStyle=styled.div`
background:pink
`
export { GlobelStyle }
注意:1,定义首字母 必须大写
2,可以采用es6 模板字符串的形式
3,可以通过props的形式传值 判断true 进行样式更改
4,内部包裹的元素 还是可以通过className的形式添加样式
组件中使用
import { Layout } from 'antd';
import { Route } from 'react-router-dom';
import './App.css';
import Goods from './component/Goods';
import Pay from './component/Pay';
import { GlobelStyle } from './component/Style';
const { Header, Content } = Layout;
function App() {
return (
<div className="App">
<div>
<GlobelStyle>
<Content style={{maxHeight:'600px'}}>
<Route path='/' exact component={Goods}></Route>
<Route path='/pay' component={Pay}></Route>
</Content>
</GlobelStyle>
</div>
</div>
);
}
export default App;
为什么使用 style-components?
不会造成全局样式的污染,我们可以使用它来实现局部样式的设置,可以以组件的形式编写样式