React css modules - Применение стилей к собственным тегам 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;
}

Но поскольку я использую тег semanti c и Преимущество использования css -модулей заключается в том, что они не могут вызывать интерференцию имен, возможно ли каким-то образом напрямую стилизовать nav без необходимости передачи класса styles?

Like

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

Если вы хотите стилизовать навигацию без передачи стиля, вы можете напрямую импортировать файл css. Так же, как:

import './main.css';

// In main.css file you can-> :
nav, .navbar-classname {
    display: flex;
    padding: 20px;
    background: #6dd3d6;
}

Answer 2

Вы имеете в виду непосредственно встроить стили тегов HTML в React? Да, ты можешь! вы можете сделать это вот так

<nav style={{"display": "flex", "padding":"20px", "background: #6dd3d6"}}></nav>

, хотя есть более чистый способ: если вы хотите записать свой стиль прямо в файл без импорта каких-либо модулей стиля, вы можете проверить компоненты стиля , они дают вам возможность напрямую писать стилизованный контейнер, например:

const StyledNav = styled.nav`
    display: flex;
    padding: 20px;
    background: #6dd3d6;
`

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

, но, что вводит зависимость вашего проекта, вы можете выбрать из этих двух, надеюсь, они помогут: D