2

Я создаю статические компоненты, и хотела сделать так, чтобы при создании компонентов можно было предавать некоторые параметры. К примеры, я создаю заголовок и в пропсы передаю размер шрифта, жирный или нет и т.д.

Вот мой компонент.

import React from 'react'

const Heading = ({children, ...props}) => {
    return (
        <div style={{ fontSize: Number(props.fontsize)}}>
            {children}
        </div>
    )
}

export default Heading

А вот я вызываю компонент

<Heading fontsize="24" bold={true} >Hello </Heading>

И я знаю что инлайн стили не есть хорошо, именно поэтому мне хотелось бы стили передавать по другому, но как это сделать? Я думала создать отдельный файл Heading.css и все стили прописывать там, но не знаю как пропсы передать туда. И является ли это правильным решением. Как лучше всего поступить в этом случае?

2
  • 2
    Если знаешь что "инлайн стили не есть хорошо" - передавай имена классов.
    – ksa
    10 фев в 7:39
  • Зачем вообще задавать стили через пропсы? Каждому компоненту свой css
    – Maneken
    18 июн в 20:46

1 ответ 1

-2

Я бы использовал (и использую) Styled Components. Там можно установить какие-то умольчаные значения)). Но можно и просто обычным цссом все это решить.

Использовать компонентный подход - это, конечно же, хорошо, но не до такой же степени. Во-первых, div - это не заголовок (даже в неиндексируемом контенте нужно придерживаться семантики, ради приличия хотя бы))). Во-вторых, заведите себе разные компоненты для разных заголовков. Например, если на страницах есть h1 и он везде разного цвета (а остальное одинаковое), то заведите ему один пропс - цвет и этот компонент должен быть не div, а h1. И так далее, для заголовков нижнего уровня.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.