這篇文章主要介紹“CSS中的in JS是什么意思”，在日常操作中，相信很多人在CSS中的in JS是什么意思問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS中的in JS是什么意思”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

我們提供的服務(wù)有：做網(wǎng)站、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、橋西ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的橋西網(wǎng)站制作公司

說明

1、CSS中in JS，意思就是使用js語言寫css，完全不需要些單獨(dú)的css文件，所有的css代碼全部放在組件內(nèi)部，以實(shí)現(xiàn)css的模塊化。

2、CSS in JS其實(shí)是一種編寫思想。

目前已經(jīng)有超過40多種方案的實(shí)現(xiàn)，最出名的是 styled-components。

實(shí)例

import React from "react";
import styled from "styled-components";
 
// 創(chuàng)建一個(gè)帶樣式的 h2 標(biāo)簽
const Title = styled.h2`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
 
// 創(chuàng)建一個(gè)帶樣式的 section 標(biāo)簽
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
 
// 通過屬性動(dòng)態(tài)定義樣式
const Button = styled.button`
  background: ${props => (props.primary ? "palevioletred" : "white")};
  color: ${props => (props.primary ? "white" : "palevioletred")};
 
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;
 
// 樣式復(fù)用
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;
 

  
  Primary
;

到此，關(guān)于“CSS中的in JS是什么意思”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！