前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件

简介: 前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件

如果想在React中想要像Vue一样把css和js写到一个文件中,可以使用CSS-in-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()选择要继承的样式,并且可以拿到状态。

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>
    </>
  )
}
相关文章
|
1天前
|
JavaScript 前端开发
vue 实现在线预览PDFpdf文件
vue 实现在线预览PDFpdf文件
10 0
|
4天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
9 0
|
4天前
|
JavaScript
vue项目开发笔记记录(四)
vue项目开发笔记记录
41 0
|
4天前
|
JavaScript 定位技术
vue项目开发笔记记录(二)
vue项目开发笔记记录
52 0
|
4天前
|
JSON JavaScript API
vue项目开发笔记记录(一)
vue项目开发笔记记录
62 0
|
12天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
12天前
|
JavaScript
vue element 导出blob后台文件流xlsx文件自动下载(且规避乱码)
vue element 导出blob后台文件流xlsx文件自动下载(且规避乱码)
|
18天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
95 0
|
8月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
64 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置