styled-components 使用小結

1. 常規使用

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #333;        
` 

// 更改了Title的字體顏色， 為紅色
const SubTitle = styled(Title)`
  color: #f00;
`

 

2. 使用props

// 傳遞props
const SubTitle = styled(Title)<{
    color: string
}>`
  color: ${props => props.color}
`

// 設置默認字體顏色
SubTitle.defaultProps = {
  color: 'green',
}

 

3. 修改三方組件的樣式

import React  from 'react'
import styled, { createGlobalStyle } from 'styled-components'

// 以修改antd ToolTip默認樣式為例,  這里是改變字體顏色

const TooltipStyle = createGlobalStyle`
  .ant-tooltip-inner {
    color: #545A69;
  }
`

// 在組件中使用以上樣式

const Test = () => {
   return (
      <div>
           <TooltipStyle />   // 使用全局樣式
           <Tooltip title= " 我是提示信息" >
             提示
           </Tooltip>
      </div>
    )            
}
    

 

ps: 為辨別類名， 我們可以在package.json文件 babel中加入styled-components 的插件， 即：

 "babel": {
    "plugins": [
      "babel-plugin-styled-components"
    ]
  },