react css 污染解决方法

最新推荐文章于 2025-06-10 11:54:19 发布

原创最新推荐文章于 2025-06-10 11:54:19 发布 · 933 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

收录于

本文介绍了如何在React项目中使用CSS模块（如.css.module.scss）并应用到导航栏组件的设计，包括组件构造函数和渲染方法的实现。

上代码

在这里插入图片描述

.m-nav-bar {
 background: #171a21;
 .content {
  height: 104px;
  margin: 0px auto;
 }
}

import React from "react";
import styles from  './css.module.scss'


export default class NavBar extends React.Component<any, any> {
  constructor (props: any) {
    super(props);
    this.state = {
    };
  }

  render () {
    return (
      <div className={styles['m-nav-bar']}>
        <div className={styles['content']}>
          内容
        </div>
      </div>
    );
  }
}