CSS中的in JS是什么意思

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

說明

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

2、CSS in JS其實是一種編寫思想。

目前已經有超過40多種方案的實現，最出名的是 styled-components。

實例

import React from "react";
import styled from "styled-components";
 
// 創建一個帶樣式的 h2 標簽
const Title = styled.h2`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
 
// 創建一個帶樣式的 section 標簽
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
 
// 通過屬性動態定義樣式
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;
`;
 
// 樣式復用
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;
 
<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
  <Button primary>Primary</Button>
</Wrapper>;

到此，關于“CSS中的in JS是什么意思”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！