Перейти к содержанию

CSS модули

CSS-модули - это CSS-файлы, в которых имена классов, анимации и медиа-запросов по умолчанию локализованы. CSS-модули позволяют писать стили на языке CSS, но Solid потребляет их как объекты Javascript. Именам классов, на которые ссылаются файлы CSS-модулей, присваиваются уникальные имена, чтобы избежать коллизий имен селекторов. Еще одним преимуществом использования CSS-модулей по сравнению с обычными CSS-файлами является то, что связываются только селекторы, на которые есть ссылки.

Мы покажем, как создавать файлы CSS-модулей и как использовать их в приложениях Solid.

Использование CSS-модулей

Для начала создадим файл с именем style.module.css, в котором можно создавать стили так же, как и в обычных CSS-файлах. Однако в файлах CSS-модулей вы не сможете использовать имена HTML-тегов (например, div, h1, li, a и т.д.), поскольку в файлах CSS-модулей они будут рассматриваться как нечистые селекторы.

Примечание

Файлы модулей не ограничиваются только расширением CSS-файлов, вы также можете иметь .module.(scss|sass|css) расширения файлов. Все зависит от вас.

Мы можем использовать наш предыдущий код в файле styles.css в нашем новом файле CSS Module, поскольку мы используем только имена классов в качестве селекторов

1
2
3
4
5
6
7
8
9
/* styles.module.css */

.foo {
    color: red;
}

.bar {
    background-color: blue;
}

Давайте рефакторим некоторые части нашего файла компонента, чтобы использовать наш файл модуля CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
//component.jsx

import styles from “styles.module.css”

function Component() {
  return (
    <>
      <div class={`${styles.foo} ${styles.bar}`}>
        Hello, world!
      </div>
    </>
  )
}

Если вы хотите использовать только один из стилей, то его можно присвоить атрибуту class следующим образом

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
//component.jsx

import styles from 'styles.module.css';

function Component() {
    return (
        <>
            <div class={styles.foo}>Hello, world!</div>
        </>
    );
}

Можно также смешивать синтаксис модулей с обычными строковыми именами классов, например, так

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
//component.jsx

import styles from 'styles.module.css';

function Component() {
    return (
        <>
            <div class={`${styles.foo} container`}>
                Hello, world!
            </div>
        </>
    );
}

Примечание

Если вы задаетесь вопросом: "Как использовать стили с тире в именах?", не волнуйтесь, мы поможем вам. Это можно сделать с помощью скобочной нотации, например, так styles["foo-with-dash"], как при запросе ключей объекта

Ссылки

Комментарии