What am I doing wrong with modular styles?

Question

React

Component:

import React, {Component} from 'react'
import styles from './Videos.module.css'

export default class Videos extends Component{
    render(){
        return(
            <div id="test1" className={`row ${styles.VideoRoom}`}>
                <div className={`col s12 center grey lighten-3 ${styles.HostVideo}`}>
                    Видео хоста
                </div>
                <div className={`col s12 center grey lighten-3 ${styles.MemberVideos}`}>
                    Видео участников
                </div>
            </div>
        );
    }
}

Styles:

.VideoRoom{
    padding: 2rem 0;
}

.HostVideo{
    padding: 5rem 0;
}

.MemberVideos{
    padding: 15rem 0;
}

Only the .VideRoom class works. Can you suggest what is the problem?

Answer 1

The selector .col.s12has more specificity than the css class from the module. To fix, separate the grid structure from the component structure:

import React, {Component} from 'react'
import styles from './Videos.module.css'

export default class Videos extends Component{
    render(){
        return(
            <div id="test1" className={`row ${styles.VideoRoom}`}>
                <div className="col s12 center grey lighten-3">
                   <div className={styles.HostVideo}>
                      Видео хоста
                   </div>
                </div>
            </div>
        );
    }
}

Or if you just want to override column styles, then try using the directive :global(.class)in css modules ( more info ). It should be something like :global(.col).HostVideo.
You can read about specificity: here , here .