React) React Component Styling with CSS Modules

Js

import styles from './CSSModule.module.scss';
const CSSModule = () => {
    return (
        <div className ={`${styles.wrapper} ${styles.inverted}`}>
            hello, i am <span className = "something">CSS Module!</span>
        </div>
    );
};

//App.js
// import {Component} from 'react';
// import CSSModule from './frames/Component style/classname + Sass/CSSmodule';
//
// class App extends Component {
//     render(){
//         return(
//             <div>
//                 <CSSModule/>
//             </div>
//         );
//     }
// }
//
// export default App;
export default CSSModule;

1. **CSS Modules Usage**: The first part of the code imports styles from a CSS module (`CSSModule.module.scss`). CSS Modules help in avoiding global scope for CSS classes, making the styles specific to the component they are imported into. This approach minimizes conflicts and ensures that styles do not unintentionally apply to other parts of the application.

2. **Component Definition**: A functional component named `CSSModule` is defined using an arrow function. Inside the component, it returns a `div` element that includes a greeting message. The `div` element utilizes two CSS classes from the imported `CSSModule.module.scss` file: `wrapper` and `inverted`. This is achieved by using template literals to dynamically assign class names.

3. **Span with Global Class**: Within the `div`, there's a `span` element that is assigned a class name `something`. Unlike the classes applied to the `div` element, this class name is not derived from the imported CSS module, indicating it could be a global style or defined elsewhere.

4. **Integration in App Component**: The commented-out section in the code (App.js) shows how to import and use the `CSSModule` component within a larger application. The `CSSModule` component is imported and rendered inside the `App` component's render method. This part of the code illustrates how components can be modularly designed and integrated into React applications.

5. **Export Statement**: The `CSSModule` component is exported as the default export of the file, making it available for import in other parts of the application, such as demonstrated in the commented-out `App.js`.

scss

.wrapper{
  background: black;
  padding: 1rem;
  color: white;
  font-size: 2REM;
  &.inverted {
    color: black;
    background: white;
    border: 1px solid black;
  }
}

:global {
  .something {
    font-weight: 800;
    color: aqua;
  }
}

 

1. **`.wrapper` Class**: Defines the base styling for an element that uses the `wrapper` class. This includes a black background, white text color, padding around the content, and a font size of 2rem. These styles set a distinct look for the component, ensuring it stands out with a high-contrast theme.

2. **`.wrapper.inverted` Modifier**: Utilizes Sass's parent selector (`&`) feature to create a modifier class. When an element has both the `wrapper` and `inverted` classes, this style overrides the base `.wrapper` styles. It inverts the color scheme to a white background with black text and adds a 1px solid black border around the element. This capability demonstrates the power of CSS Modules in conjunction with Sass to dynamically modify component appearances based on class combinations.

3. **`:global` Scope**: Addresses the need to occasionally break out of the local scope provided by CSS Modules for certain styles that should be globally available across the application. The `.something` class within the `:global` block is made globally accessible, styling any element with this class to have aqua-colored text and a font weight of 800 (bold). This global styling is useful for elements that should maintain consistent styling regardless of where they are used within the application.

4. **Integration with React Component**: When these styles are applied to the previously shared React component, the `div` will have the base or modified `wrapper` styles depending on the inclusion of the `inverted` class. The `span` within the component, with the class `something`, will adopt the global styles defined for bold and aqua-colored text. This setup demonstrates a practical application of CSS Modules and Sass in a React environment, allowing for both scoped and global styling strategies to coexist effectively.