2021_08_31.md

• TODO [[CSS]] CSS Modules with [[Nextjs]] - Steps to set up collapsed:: true

  1. Create a file named the same as the component where you are using the CSS styling as shown: `COMPONENT_NAME.module.css`.
  

  • 2. Then, add the desired styling to the file.
  • 3. When ready to add the styling to the component, import the CSS module and use in className prop.

    • import styles from "./COMPONENT_NAME.module.css"
      
      const COMPONENT_NAME = () => {
        return (
        <div className={styles.awesomeStyling}>
          Styled container
        </div>
        );
      };
      
      export default COMPONENT_NAME;

• TODO Implementing a page SVG styling with [[CSS]] modules in [[Nextjs]]
  • The site I used to generate a custom SVG shape

  • The site will generate the HTML & CSS for you. Follow steps:

    1. Add the HTML to the React component
    

    • 2. Create a COMPONENT_NAME.module.css file and add the generated CSS.
    • 3. Use className instead of class, and customize the naming of the classes to fit your use case.
    • 4. import styles from "./COMPONENT_NAME.module.css"; and use className={styles.CSS_CLASS_NAME} as your div's prop.
    • 5. Add a z-index: -1 tag in the CSS class if needed to send shape to the background