时间戳

首页 > 解决方案 > React css 模块 - 将样式应用于原生 html 标签

css - React css 模块 - 将样式应用于原生 html 标签

问题描述

这很简单。假设我有一些NavBar组件：

import React from 'react';
import styles from './NavBar.module.css';

export default function NavBar() {
    return(
    <nav className={styles.nav}>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </nav>
    );
}

现在我有一个NavBar.module.css文件：

.nav {
    display: flex;
    padding: 20px;
    background: #6dd3d6;
}

但是由于我使用的是语义标签并且使用 css-modules 的好处是它们不会引起名称干扰，是否有可能以某种方式直接设置样式nav而无需通过styles类？

喜欢

import styles from './NavBar.module.css';

export default function NavBar() {
    return(
    <nav>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </nav>
    );
}

和

 nav {
        display: flex;
        padding: 20px;
        background: #6dd3d6;
    }

标签： cssreactjs

解决方案

我认为你可以做类似的事情。

import React from 'react';
import styles from './NavBar.module.css';

export default function NavBar() {
    return(
    <div className={styles.nav_container}>
      <nav>
          <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
          </ul>
      </nav>
    </div>
    );
}

在您的 css 模块文件（NavBar.module.css）中，您可以执行

.nav_container nav {
      display: flex;
      padding: 20px;
      background: #6dd3d6; 
 }
.nav_container ul{
    /* for example */
    list-style: none;
}

.nav_container li{
      /* for example */
      font-size: large;
}

尽管您将在 css 文件中多次编写 nav_container ，但它比将 className 放在每个 jsx 标记上更易于管理和复制。

当然，而不是额外的 div 你可以做

<nav className={styles.nav}>
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
   </ul>
</nav>

和 css 模块文件

.nav{
        display: flex;
        padding: 20px;
        background: #6dd3d6;
}

.nav ul{

}

.nav li{

}

推荐阅读