Что я делаю не так с модульными стилями?

Question

[Adik Izat]

Компонента:

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>
        );
    }
}

Стили:

.VideoRoom{
    padding: 2rem 0;
}

.HostVideo{
    padding: 5rem 0;
}

.MemberVideos{
    padding: 15rem 0;
}

Работает только класс .VideRoom. Можете подсказать в чем проблема?

Comments

[ned4ded]

могу предположить, что .col.s12 перебивает ваши стили, на самих дом-элементах класс висит? у класса отображаются стили в эксплорере?

[Adik Izat]

Стили загружены, и в классах отображаются. Насчет перебивания не могу разобраться. Использую materialize-css. Не пойму почему стили билиотеки перекрывают стили модуля. Стили библиотеки подключены до стилей модуля. Так же расположение основного класса в самом конце.

[Adik Izat]

ned4ded, если знаете как это исправить прошу написать в ответы.

[Adik Izat]

ned4ded, .col.s12 действительно перебивают, спасибо что отметили. Пока что поставил на костыли в виде !important. Но в будущем хотелось бы решить

[ned4ded]

Adik Izat, написал ответ ниже. просто выделите в другой див кастомные стили.

[ned4ded]

если кратко подводить итог, то есть несколько "грейдов" специфичности. Порядок селекторов - это низший грейд. Наличие селектора по классу - это средний грейд. В вашем случае получается у модуля низший грейд + средний грейд, а у стилей из библиотеки средний грейд + средний грейд.

Answer 1

[ned4ded]

Селектор .col.s12 имеет большую специфичность, чем css-класс из модуля. Чтобы исправить отделите структуру грида от структуры компонента:

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>
        );
    }
}

Либо если хотите именно переопределять стили колонки, то попробуйте воспользоваться директивой :global(.class) в css-модулях (подробнее). Должно получиться что-то вроде :global(.col).HostVideo.

О специфичности можно почитать: тут, тут.

Comments

[Adik Izat]

Спасибо!