React css modules - Applying styles to native html tags

user_11124740 0
Viewed 1548

This is pretty straightforward. Let's say I have some NavBar component:

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>
    );
}

And now I have a NavBar.module.css file:

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

But since I am using the semantic tag and the benefit of using css-modules is that they cannot cause name interference, is it somehow possible to directly style the nav without having to pass the styles class?

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>
    );
}

with

 nav {
        display: flex;
        padding: 20px;
        background: #6dd3d6;
    }
reactjs css
3 Answers

I think you could do something like.

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>
    );
}

in your css module file (NavBar.module.css) you could do

.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;
}

although you'll write nav_container many times in the css file it's more manageable and copy-able, than putting className on each jsx tag.

of course instead of the extra div you can do

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

and the css module file

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

.nav ul{

}

.nav li{

}
user_111015940

Do you mean to directly inline-styling the HTML tags in React? yes you can! you can do it like this

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

there's a cleaner way though, if you want to write your style directly in the file without importing any style modules, you might want to check the styled components library, they give you the ability to write a styled container directly, for example:

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>
    );
}

but, that introduces a dependency to your project, you can choose from those two, hope they help :D

user_109495140

If you want style the nav without passing style then you can directly import the css file. Just Like:

import './main.css';

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