style-components使用

目录

安装

创建全局样式文件，以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？

不会造成全局样式的污染，我们可以使用它来实现局部样式的设置，可以以组件的形式编写样式