前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
2023-12-13 03:05:45
如果想在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>
</>
)
}
文章来源:https://blog.csdn.net/lrx276/article/details/134776630
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!