Працяг вывучэння стылізацыі з CSS modules React

Працягнем працу над нашым дадаткам buttons. Цяпер займемся галоўным кампанентам App, які ўжо быў згенераваны ў папцы src першапачаткова. У ім у нас будзе два дывы, загаловак і кнопка.

Замянім назву файла 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";

Цяпер мы можам бачыць у браўзеры вынік працы нашага дадатку.

Калі вы адкрыяце згенераваную верстку ў панэлі распрацоўшчыка ў браўзеры, вы ўбачыце, што ў кожнага кампанента згенераваны свае ўнікальныя класы. Такім чынам, нам не трэба больш турбавацца аб канфліктах паміж класамі асобных кампанентаў.

Важна яшчэ тое, што CSS modules не забараняе імпартаваць і звычайныя знешнія CSS файлы.