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

Question

这非常简单。假设我有一些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;
    }

Answer 1

我想你可以做类似的事情。

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{

}