styled-components

安装style-components

yarn add styled-components

安装vscode-styled-components插件

引入

import styled from 'styled-components'

使用

import 'antd/dist/antd.less'
import styled from 'styled-components'
function App() {
 const HomeWrapper=styled.div`
 font-size:50px;
 color:red;
 span{
   color:orange;
   &.active{
      color:green;
   }
   &:hover{
     color:blue;
     font-size:40px;
   }
   &::after{
     content:'ssss'
   }
   }
 `
  return (
    <div className="App">
 <h1 >我是一个标题</h1>
 <HomeWrapper>
 <h2>我是一个副标题</h2>
   <span>轮播1</span>
   <span className="active">轮播2</span>
   <span>轮播3</span>
   <span>轮播4</span>
 </HomeWrapper>
    </div>
  );
}
export default App;

设置属性,可以通过attrs设置属性

import 'antd/dist/antd.less'
import styled from 'styled-components'
function App() {
 const ChangeInput=styled.input.attrs({
   placeholder:'wangsu',
   bgColor:'red'
 })`
 background-color:#7a7ab4;
 color:${props=>props.bgColor}
 `
  return (
    <div className="App">
 <h1 >我是一个标题</h1>
 <ChangeInput type="text"/>
    </div>
  );
}
export default App;

继承

import React, { Component } from 'react'
import styled from 'styled-components'
const HYbutton=styled.button`
   color:red;
   border:1px solid #ccc;
   padding:10px 20px;
`
//这里使用继承
const XLbutton=styled(HYbutton)`
background-color:blue;
`
export default class Button extends Component {
    render() {
        return (
            <div>
                <HYbutton>这是一个按钮</HYbutton>
                <XLbutton>这是一个继承按钮</XLbutton>
            </div>
        )
    }
}