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

Стилизация в Solid

Стилизация приложений Solid аналогична стилизации HTML. Поэтому если вы когда-нибудь использовали CSS или встроенные стили, то вы уже знаете, как оформлять приложения Solid. 💡 В этом руководстве вы узнаете об основных концепциях стилизации приложений Solid, а также о некоторых продвинутых API, таких как classList и JSX.CSSProperties.

У нас также есть руководства по CSS Modules, Sass, Tailwind CSS, UnoCSS и WindiCSS.

Основы

Для стилизации элементов мы используем атрибуты class и style. Атрибут class, называемый классом, полезен для декларативной стилизации одного или нескольких элементов с помощью CSS (каскадных таблиц стилей). Атрибут style, называемый инлайн-стилями, используется для императивного стилевого оформления одного и только одного элемента.

В целом, мы советуем как можно чаще использовать классы, поскольку они статически оптимизированы и самодокументированы. Тем не менее, встроенные стили полезны для создания прототипов, установки переменных CSS с помощью значений времени выполнения и переопределения классов. Используйте то, что имеет для вас смысл, и не бойтесь экспериментировать 🙂 .

Работа со встроенными стилями

Атрибут style предоставляет возможность императивно стилизовать один и только один элемент и задавать CSS-переменные, используя значения времени выполнения. Solid поддерживает использование атрибута style как в виде строк, так и в виде объектов. На практике это означает, что вы можете написать <div style="color: red;"> и <div style={{"color": "red" }}>. Эти входы обеспечивают одинаковые выходы.

Строки стилей более лаконичны и переносимы (их можно использовать как в Solid, так и за его пределами). Объекты стилей более многословны, но обладают такими преимуществами, как intellisense для автозавершения и безопасность типов (если вы используете IDE, например VS Code, то никаких дополнительных расширений не требуется). Если вам нужна переносимость, то, вероятно, лучше использовать стилирующие строки. Если вам нужен intellisense, такой как автодополнение, безопасность типов и т.д., то лучше использовать объекты стилей.

Обратите внимание, что строки стилей и объекты стилей всегда используют синтаксис kebab-case. Это означает, что <div style={{ backgroundColor: "red" }}> интерполируется как <div style="backgroundColor: red;">, что является некорректным CSS. Solid всегда интерполирует CSS-свойства как есть.

Этот код должен дать вам представление о том, как выглядит стилизация с использованием стилевых строк и стилевых объектов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// This component is styled using inline styles as strings.
function StyledStringComponent() {
    const backgroundColor = 'yellow';
    const fontWeight = 'bold';

    return (
        <>
            <div
                style={`background-color: ${backgroundColor};`}
            >
                <h1
                    style={`color: red; font-weight: ${fontWeight};`}
                >
                    Hello World in red
                </h1>

                <h1 style="color: rgb(0, 255, 0); padding: 20px;">
                    Hello World in green
                </h1>

                <h1 style="color: blue;">
                    Hello World in blue
                </h1>
            </div>
        </>
    );
}

// This component is styled using inline styles as objects.
function StyledObjectComponent() {
    const backgroundColor = 'yellow';
    const fontWeight = 'bold';

    return (
        <>
            <div
                style={{
                    'background-color': backgroundColor,
                }}
            >
                <h1
                    style={{
                        color: 'red',
                        'font-weight': fontWeight,
                    }}
                >
                    Hello World in red
                </h1>

                <h1
                    style={{
                        color: 'rgb(0, 255, 0)',
                        padding: '20px',
                    }}
                >
                    Hello World in green
                </h1>

                <h1 style={{ color: 'blue' }}>
                    Hello World in blue
                </h1>
            </div>
        </>
    );
}

Обратите внимание, что каждое свойство CSS может быть использовано в качестве встроенного стиля, начиная от простого background-color и заканчивая сложным mask-mode.

Работа с классами

Атрибут class предоставляет возможность декларативно стилизовать один или несколько элементов с помощью CSS (каскадных таблиц стилей). Кроме того, Solid поддерживает функцию classList для условного переключения классов на основе значений во время выполнения программы.

В целом, мы советуем как можно чаще использовать классы, поскольку они статически оптимизированы и самодокументированы. Тем не менее, встроенные стили полезны для создания прототипов, установки переменных CSS с использованием значений времени выполнения и переопределения классов. Используйте то, что имеет смысл для вас, и не бойтесь экспериментировать 🙂 .

Если вы только начинаете, то можете разместить теги <style>, которые помогут вам создавать прототипы классов рядом с HTML. Есть несколько причин, по которым вы не захотите делать этого для производства, но для создания прототипов это полезный способ начать. Обратите внимание, что сообщество предоставляет такие пакеты, как solid-styled, которые определяют границы CSS точно так же, как и границы стилей в Vue, Svelte и Astro.

Вот пример простого компонента карты:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Card.jsx
function Card() {
    return (
        <>
            <style>{`
      .grid { display: grid; }
      .grid.grid-center { place-items: center; }
      .screen { min-height: 100vh; }

      .card {
        height: 160px;
        aspect-ratio: 2;
        border-radius: 16px;
        background-color: white;
        box-shadow: 0 0 0 4px hsl(0 0% 0% / 15%);
      }
    `}</style>

            <div class="grid grid-center screen">
                <div class="card">Hello, world!</div>
            </div>
        </>
    );
}

Допустим, мы готовы извлечь наш CSS в отдельный файл. Мы можем скопировать-вставить содержимое нашего тега <style> и извлечь его в файл card.css. Теперь наш код выглядит следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* Card.css */
.grid {
    display: grid;
}
.grid.grid-center {
    place-items: center;
}
.screen {
    min-height: 100vh;
}

.card {
    height: 160px;
    aspect-ratio: 2;
    border-radius: 16px;
    background-color: white;
    box-shadow: 0 0 0 4px hsl(0 0% 0% / 15%);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// Card.jsx
import './Card.css';

function Card() {
    return (
        <>
            <div class="grid grid-center screen">
                <div class="card">Hello, world!</div>
            </div>
        </>
    );
}

При условии, что card.css и Card.jsx находятся в одной папке, Card.jsx может импортировать card.css, используя относительный синтаксис. Относительный синтаксис - это когда файл начинается с ./. Размещение CSS-файлов рядом с файлами компонентов обычно является хорошей стратегией организации. 👍

Импортируя "./card.css", мы импортировали классы .grid, .grid.center, .screen, .card в качестве глобально масштабируемого CSS. Это означает, что все элементы, использующие одно или несколько имен этих классов, будут автоматически наследовать эти стили. В этом подходе есть свои плюсы и минусы, но если вы заинтересованы в автоматической передаче классов импортеру, вы можете использовать CSS Modules.

Для глобального CSS, не относящегося к компонентам, мы рекомендуем создавать и поддерживать src/index.css, импортируемый src/index.jsx. Для компонентного CSS рекомендуется создавать и поддерживать src/components/<component>.css, импортируемый src/components/<Component>.jsx.

Например:

1
2
3
4
5
6
src/
  index.css
  index.jsx (imports index.css)
  components/
    nav.css
    Nav.jsx (imports nav.css)

Ссылки

Комментарии