内联样式
<div style={{width:200+300,height:1==1?200:300,backgroundColor:'red'}}></div>
引入外部样式
- import ‘./style.css’
import ‘./style.scss’
css in js
npm i styled-components -S
import styled, {keyframes} from 'styled-components'
const Logo = styled.h1`
width: 300px;
height: 400px;
color:red;
border: 1px solid #333;
`
const Container = styled.div`
width: 300px;
height: 300px;
border:1px solid red;
p {
color:red;
}
span {
color: blue;
}
`
const QfBtn1 = styled.button`
padding: 20px;
border: 1px solid #123987;
border-radius: 5px;
`
const QfBtn2 = styled(QfBtn1)`
background: tomato;
`
const Box = styled.h1`
width: 300px;
height: 400px;
border: 1px solid #333;
background: ${props => props.bgc?props.bgc:'red'}
`
const ani = keyframes`
0%{
transform: rotate(-45deg);
}
100% {
transform: rotate(45deg);
}
`
const Move = styled.div`
width: 8px;
height: 100px;
background: red;
transform-origin:center bottom;
margin: 50px auto;
animation: ${ani} 100ms linear infinite alternate;
`
export {
Logo,
Container,
QfBtn1,
QfBtn2,
Box,
Move
}