React?css-in-js怎么應(yīng)用

這篇文章主要介紹“React css-in-js怎么應(yīng)用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“React css-in-js怎么應(yīng)用”文章能幫助大家解決問題。

1. 介紹

CSS-in-JS 是一種技術(shù)，而不是一個具體的庫實現(xiàn)。簡單來說 CSS-in-JS 就是將應(yīng)用的CSS樣式寫在 JavaScript 文件里面，而不是獨立為一些 css，scss 或 less 之類的文件，這樣你就可以在 CSS 中使用一些屬于JS的諸如模塊聲明，變量定義，函數(shù)調(diào)用和條件判斷等語言特性來提供靈活的可擴展的樣式定義。CSS-in-JS 在 React 社區(qū)的熱度是最高的，這是因為 React 本身不會管用戶怎么去為組件定義樣式的問題，而 Vue 有屬于框架自己的一套定義樣式的方案。

styled-components 應(yīng)該是 CSS-in-JS 最熱門的一個庫，通過 styled-components，你可以使用 ES6 的標(biāo)簽?zāi)０遄址Z法，為需要 styled 的 Component 定義一系列 CSS 屬性，當(dāng)該組件的 JS 代碼被解析執(zhí)行的時候，styled-components 會動態(tài)生成一個 CSS 選擇器，并把對應(yīng)的 CSS 樣式通過 style 標(biāo)簽的形式插入到 head 標(biāo)簽里面。動態(tài)生成的 CSS 選擇器會有一小段哈希值來保證全局唯一性來避免樣式發(fā)生沖突。

在react項目中，可以讓樣式命名不沖突的方案

• 定義樣式名稱時，就讓它唯一

• 使用內(nèi)置的cssModule

• css-in-js 把css當(dāng)作js來使用

2. 使用

首先需要安裝相關(guān)包：

yarn add styled-components

使用：

App.jsx：

import React, { Component } from 'react'
import Child from './components/Child-07-樣式'
class App extends Component {
  render() {
    return (
      <div>
        <Child />
      </div>
    )
  }
}
export default App

Child.jsx：

import React, { Component } from 'react'
// 導(dǎo)入樣式組件
import { ChildContainer, TitleContainer, SubTitleContainer, ContentContainer } from './style'
class Child extends Component {
  render() {
    return (
      <ChildContainer>
        {/* <TitleContainer>我是一個child組件</TitleContainer> */}
        {/* 嵌套使用 */}
        <div className="title">我是一個child組件</div>
        <SubTitleContainer>我是一個副標(biāo)題</SubTitleContainer>
        <hr />
        {/* 屬性傳遞 */}
        <ContentContainer color='#00f' size="20">
          我是內(nèi)容
        </ContentContainer>
      </ChildContainer>
    )
  }
}
export default Child

style.js：

// 使用css-in-js技術(shù)方案完成 react項目中的樣式編寫
// styled-components把樣式當(dāng)作組件來定義和使用，樣式就是組件，組件就是樣式
import styled from 'styled-components'
// 語法
// export const ChildContainer = styled.html標(biāo)簽名`樣式`
export const ChildContainer = styled.div`
  /* 在此字符串模板中，寫css就可以了 */
  font-size: 30px;
  color:#f0f;
  /* 嵌套定義 */
  .title{
    font-size:18px;
  }
`
export const TitleContainer = styled.div`
  color:red;
  font-size:18px;
`
// 樣式繼承
export const SubTitleContainer = styled(TitleContainer)`
  font-size:14px;
`
// 在樣式中獲取樣式組件中的屬性信息
export const ContentContainer = styled.div`
  color:${props => props.color || '#888'};
  font-size: ${props => props.size || 12}px;
`

關(guān)于“React css-in-js怎么應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。