学习React 的第六天 组件样式

光太郎
265 阅读3分钟

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情”

1. 简介

之前几天学习了React的组件创建，状态创建，父子组件传值等操作以及常用的Hook，今天的话就学习一个比较简单的知识点，给React的组件添加样式

2. 代码学习

1. 在组件中直接使用style

    function StyleDemo() {
        const titleStyle = {
            color: '#ffa3ff',
            fontSize: 24,
        }
        const subTitleStyle = {
            color: '#edc4ed',
            fontSize: 12,
        }
        const divStyle = {
            backgroundColor: '#947c7c',
            height: '100px',
            width: '50%',
            padding: '20px'
        }

        return <div style={divStyle}>
            <span style={titleStyle}>Demo</span>
            <h4 style={subTitleStyle}>demo副标题</h4>
        </div>
    }

image.png

  1. 使用该方式来写React的样式的话，必须转换为驼峰命名fontSize
  2. 而且没有属性值需要写成字符串类型

2. 使用 引入css文件

  1. css文件 
    #app{
    background-color: antiquewhite;
    width: 100vw;
    height: 100vh;
}

.title{
    font-size: 24px;
    color: #535bf2;
}
  2. App.tsx 文件 
    import './demo.css'
import Header from './component/header'


function App() {
    return <div id="app">
        <h1 className="title">APP的标题</h1>
        <Header></Header>
    </div>
}

export default App
  3. header组件 
    export default function Header() {

    return <div>
        <h4 className="title">header标题</h4>
    </div>
}

image.png

  1. 便于维护
  2. 父组件的样式影响到子组件

3 使用Sass 预处理器

  1. 安装sass
    pnpm i sass
  1. 创建scss 文件
  2. 在组件中引入scss文件
  3. 同样会 父组件的样式影响到子组件

4. 使用 module.scss| module.css 方法

  1. 创建 demo01.module.scss文件
.app{
    background-color: antiquewhite;
    width: 100vw;
    height: 100vh;
}

.title{
    font-size: 24px;
    color: #535bf2;
}
  1. 在组件中使用
import styles from './demo.module.scss'
import Header from './component/header'


function App() {
    return <div className={styles.app}>
        <h1 className={styles.title}>APP的标题</h1>
        <Header></Header>
    </div>
}

image.png

  1. 该写法是将css文件作为一个模块引入
  2. 该模块中的css只作用于当前元素以及子元素，不会影响后代组件（className={styles.app}）
  3. 定义的类名最好使用驼峰命名

5. 使用 styled-components 样式化组件

  1. 安装styled-components
pnpm i styled-components @types/styled-components
  1. 定制style组件
import styled from 'styled-components';

const AppDiv = styled.div`
  width: 300px;
  height: 300px;
  background-color: #f9f9f9;
  border: 1px solid red;
  margin-left: 50%;
  text-align: center;
`;

const H1 = styled.h1`
  color: grey;
`;
  1. 在组件中使用
function App() {
    return <AppDiv>
        <H1>APP的标题</H1>
        <Header></Header>
    </AppDiv>
}

image.png

  1. 它是实际编写CSS代码来设计组件样式，不需要组件和样式之间映射，创建后就是一个正常的React组件
  2. 不会影响子组件，不会污染全局
  3. 不需要使用className属性控制样式，这样写更利于维护和阅读
  4. 还可以继承其他组件的样式
const H1 = styled.span`
  color: grey;
  font-size: 24px;
  display: block;
`;

const H2 = styled(H1)`
  font-size: 12px;
`

function App() {
    return <AppDiv>
        <H1>APP的标题</H1>
        <H2>子标题</H2>
        <Header></Header>
    </AppDiv>
}

image.png

  1. 修改组件的元素
    1. H2原来是一个span标签，通过添加**as='a'**之后它就变成了一个a标签
<H2 as='a' href="https://www.baidu.com" >子标题</H2>
  1. 动态参数 ${props => props.color || 'red'}
const H1 = styled.span`
  color: ${props => props.color || 'red'};
  font-size: 24px;
  display: block;
`;

<H1 color="#985757">APP的标题</H1>
<H2 color="#70FF10" as='a' href="https://www.baidu.com">子标题</H2>

3. 总结

  1. 通过本章学习了解到给React组件添加样式 方式很多，方法也各异，可以根据需求来选择，也可以混合使用。
  2. Styled-Component 有更大的社区以及讨论热度，是 CSS-in-JS 最大的生态系统方案
avatar
文章
阅读
粉丝