标签：const height react width css styled 组件 border red

内联样式

• 值 是对象 （将style属性映射成对象）

<div style={{width:200+300,height:1==1?200:300,backgroundColor:'red'}}></div>

引入外部样式

• import ‘./style.css’
  import ‘./style.scss’

css in js

• styled-components

// 安装
npm i styled-components -S

import styled, {keyframes} from 'styled-components'
// 定义一个 logo组件
// 渲染成一个组件 标签h1 样式 是 引号中的样式
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;
`

// props传参
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
}

标签：const,height,react,width,css,styled,组件,border,red
来源： https://blog.csdn.net/Xiang_Gong_Ya_/article/details/122214964

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。