快捷導(dǎo)航

React如何實現(xiàn)像Vue一樣將css和js寫在同一文件

更新時間：2024年01月03日 16:49:01 作者：田本初

這篇文章主要介紹了React如何實現(xiàn)像Vue一樣將css和js寫在同一文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

使用CSS-in-JS

下載

npm i styled-components

使用

就像寫scss一樣，不過需要聲明元素的類型

基本語法及展示如下：

import styled from "styled-components"

export default () => {
  const Father = styled.div`
    width: 200px;
    height: 200px;
    background: pink;
    span {
      font-size: 20px;
    }
    &: hover {
      background: skyblue;
    }
  `
  const Son = styled.span`
    color: #f8e;
  `
  return (
    <>
      <Father>
        <Son>我是Son</Son>
      </Father>
    </>
  )
}

也可以通過styled()選擇要繼承的樣式，并且可以拿到狀態(tài)。

import { useState } from "react"
import styled from "styled-components"
export default () => {
  const Father = styled.div`
    width: 200px;
    height: 200px;
    background: pink;
    span {
      font-size: 20px;
    }
    &: hover {
      background: skyblue;
    }
  `
  const Son = styled.span`
    color: #f8e;
  `
  const Footer = styled(Father)`
    display: ${({ isShow }) => (isShow ? "block" : "none")};
    padding: 20px;
    border: 1px solid #333;
    border-radius: 30px;
  `

  const [show, setShow] = useState(false)
  return (
    <>
      <Father>
        <Son>我是Son</Son>
      </Father>
      <button onClick={() => setShow(!show)}>點我控制Footer的顯示/隱藏</button>
      <Footer isShow={show}>我是Footer</Footer>
    </>
  )
}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Next.js實現(xiàn)react服務(wù)器端渲染的方法示例
這篇文章主要介紹了Next.js實現(xiàn)react服務(wù)器端渲染的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
react實現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題
這篇文章主要介紹了react實現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
React組件之多選Checkbox實例
這篇文章主要介紹了React組件之多選Checkbox實例,具有很好的參考價值,希望對大家有所幫助,
2023-10-10
淺談React中的元素、組件、實例和節(jié)點
這篇文章主要介紹了淺談React中的元素、組件、實例和節(jié)點，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
React?hooks?useState異步問題及解決
這篇文章主要介紹了React?hooks?useState異步問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
react-native fetch的具體使用方法
本篇文章主要介紹了react-native fetch的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
React父子組件傳值(組件通信)的實現(xiàn)方法
本文主要介紹了React父子組件傳值(組件通信)的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
React配置Redux并結(jié)合本地存儲設(shè)置token方式
這篇文章主要介紹了React配置Redux并結(jié)合本地存儲設(shè)置token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
react實現(xiàn)同頁面三級跳轉(zhuǎn)路由布局
這篇文章主要為大家詳細(xì)介紹了react實現(xiàn)同頁面三級跳轉(zhuǎn)路由布局，一個路由小案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
修復(fù)Next.js中window?is?not?defined方法詳解
這篇文章主要為大家介紹了修復(fù)Next.js中window?is?not?defined方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12