Password Generator App using React, Typescript, SASS

Community feedback

• 

  Mukwende•1,370

  @mukwende2000Posted over 1 year ago

  You can use scoped css in react ot achieve styles unique to the component you want. You will have a 'Navbar.tsx' and then 'Navbar.module.scss'. And then in your component you import the styles like "import styles from './Navbar.module.scss'" you can call it whatever, the name styles is optional, you say "import classes from 'Navbar.module.scss'". To use the styles in your components you do it this way

  function Navbar() {
  return (
  <nav className={styles.nav}>contents</nav>
  )
  }
  

  the 'nav' in syles.nav refers to a class in your Navabar.module.scss, Which means you should have something like below in the file

  .nav {your style rules}
  

  so what ever class you have, you refer to it in the jsx by saying styles.the_name_of_the_class

  0

  ---

  

  Pratik Wadekar•140

  @pratik-pdwPosted over 1 year ago

  @mukwende2000

  But then what if I want to use SASS variables defined at a place. Do I import those SASS variables every time ??

  0

  

  Mukwende•1,370

  @mukwende2000Posted over 1 year ago

  @pratik-pdw My knowledge of sass is very little, so i might not be the perfect person to answer that one.... Are you in the frontend mentor discord server?

  0