Наставак учења стилизације са CSS модулима у React-у

Наставићемо рад на нашој апликацији buttons. Сада ћемо се позабавити главном компонентом App, која је већ била генерисана у фолдеру src на почетку. У њој ћемо имати два div-а, наслов и дугме.

Променићемо назив фајла App.css у App.module.css по договору, очистићемо га и креирати у њему неколико класа са CSS стиловима за тагове:

App.module.css.app {
  display: flex;
  flex-direction: column;
  width: 300px;
  border: 1px solid brown;
  padding: 10px;
}

.wrapper {
  display: flex;
  justify-content: space-around;
}

.title {
  text-align: center;
  margin-top: 10px;
}

А сада ћемо очистити садржај фајла App.js. Затим ћемо импортовати React компоненту Buttons и стилове из App.module.css. Написаћемо наше тагове и применити стилове на њих, као и поставити React компоненту Buttons:

App.jsimport classes from "./App.module.css";
import Buttons from "./components/Buttons";

function App() {
  return (
    <div class={classes.app}>
      <h2 class={classes.title}>CSS Module Buttons</h2>
      <div class={classes.wrapper}>
        <Buttons />
      </div>
    </div>
  );
}
export default App;

Користили смо реч classes за име објекта који садржи стилове, који импортујемо из App.module.css. Као и у претходном случају, овај објекат можете назвати како вам одговара.

Остало је још пар малих корака. Променићемо назив фајла index.css по договору у index.module.css и у фајлу index.js не заборавимо да заменимо линију за импорт:

index.jsimport "./index.css";

Линијом:

index.jsimport "./index.module.css";

Сада можемо видети у прегледачу резултат рада наше апликације.

Ако отворите генерисани HTML у алату за програмере у прегледачу, видећете да свака компонента има своје јединствене класе. На тај начин, више не морамо да бринемо о конфликтима између класа појединачних компоненти.

Такође је важно да CSS модули не забрањују импортовање и обичних спољних CSS фајлова.