Как я могу стилизовать конкретную кнопку с модулями css?

Я использую модули css в качестве реакции, потому что я хочу, чтобы область действия css была привязана к конкретному компоненту. У меня есть файлы Person.js и App.js. Я хочу, чтобы только кнопка в Person.js имела красный цвет фона.

So i do

Person.js

import styles from './person.module.css';


const Person = () => {
    return (
        <div>
            <button className={styles.button}>Person compo button</button>
        </div>
    )
}

export default Person;

person.module.css

.button {
    background-color: red;
}

App.js

import './App.css';
import Person from './Person';

function App() {
  return (
    <div className="App">
    <button className="button">App compo button</button>
     <Person></Person>
    </div>
  );
}

export default App;

и теперь только кнопка - Person compo имеет красный цвет фона. Но я использую здесь класс css. Что, если я хочу стилизовать кнопку в файле Person.js без использования класса

так что у меня будет только стиль кнопки person.module.css

button {
   background-color: red;
}

как я могу сделать так, чтобы кнопка в моем файле Person.js использовала этот стиль из файла person.module.css?


reactjs css-modules react-css-modules
person sdsd    schedule 06.01.2021    source источник
comment
Я думаю, что есть несколько способов подойти к этому. У вас может быть базовый класс кнопки и другой конкретный класс для использования с кнопками в вашем Person компоненте. Или вы можете создавать свои объекты стилей, передавать их, переопределять свойства стиля и т. Д.   -  person Bas van der Linden    schedule 06.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

Один из способов - прикрепить класс к div Person:

const Person = () => {
    return (
        <div className={styles.person}>
            <button>Person compo button</button>
        </div>
    )
}

И в вашем файле person.module.css укажите ссылку на все кнопки внутри класса .person:

.person button {
   background-color: red;
}
person yaiks    schedule 06.01.2021
comment
Есть ли другой способ сделать это без использования классов? - person sdsd; 07.01.2021
comment
Я не знаком ни с каким другим способом - person yaiks; 07.01.2021