Why do React projects need to inherit CSS modules as background in component scope?

Question

I created a React component, but there was a problem, the entire website inherited the body style I set in a CSS module. I've tried this with and without the local tag, and I feel like this might have something to do with the way React wraps CSS modules, as I haven't seen anyone else have the same problem.

:local body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #300d25;
    transition: 0.5s;
}
:local body::before
{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #30bfa5;
    transition: 0.5s;
    clip-path: circle(250px at center);
}

Answer 1

You have created a React component with associated CSS modules, but the styles you defined in one of the CSS modules appear to be affecting the entire site and not just the component. This issue may be caused by incorrect usage of CSS modules, class name conflicts, global styles, spelling errors, browser extensions, or CSS-specific issues. To resolve this issue, make sure you are naming and using CSS modules correctly, check for conflicts and typos, review global styles, use CSS reset or normalize, check applied styles, and verify your Webpack configuration. If the problem persists, consider providing more details for specific troubleshooting.