[react基础] css-in-js

DYBOY

关注

阅读 167

2022-12-21


[react基础] css-in-js_App

安装

npm i -S styled-components

定义样式

# 样式js文件
import styled from 'styled-components'
const Title = styled.div`
color:red;
font-size:16px;
h3{
color:blue;
font-size:20px;
}
`
export {
Title
}

// 就像使用常规 React 组件一样使用 Title
import React, { Component } from 'react'
import { Title } from './Styles'
class App extends Component {
render() {
return (
<div>
<Title>
我只是一个标题
<h3>你好世界</h3>
</Title>
</div >
);
}
}
export default App

[react基础] css-in-js_App_02

样式继承

[react基础] css-in-js_react.js_03

属性传递

[react基础] css-in-js_react.js_04


精彩评论(0)

0 0 举报