Как передать стили через пропсы?

Question

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

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

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 и все стили прописывать там, но не знаю как пропсы передать туда. И является ли это правильным решением. Как лучше всего поступить в этом случае?

Answer 1

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

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

Answer 2

Давай разобъем задачу на несколько шагов. Сначала создаем полностью переиспользуемый компонент с минимальным набором стилей, например Card:

import React from react
import styles.scss

export const Card = (props) => {
  return (
    <div className="card">
      {props.children}
    <div>
  )
}

Добавляем библиотеку для работы с классами:

npm i classnames

Модифицируем наш компонент:

import React from react
import classNames from "classnames"
import styles.scss

export const Card = ({children, className}) => {
  return (
    <div className={classNames("card", className)}>
      {children}
    <div>
  )
}

в файл стилей добавляем классы:

.card {
  ...стили по умолчанию

  &fontSize18 {
    font-size: 18px;
  }

  &fontSize24 {
    font-size: 24px;
  }

  &colorRed {
    color: red;
  }

  &colorGreen {
    color: green;
  }
}

Переиспользуем с разными модификациями:

import {Card} from "~components/Card"

export const App = () => {
  return(
    <>
      <Card className="fontSize24">Пример</Card>
      <Card className="fontSize18">Еще пример</Card>
      <Card className="fontSize24 colorRed">Снова пример</Card>
      <Card className="fontSize18 colorGreen">Еще один пример</Card>
    </>
  )
}

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

БЛОГ НА HUSL

Как передать стили через пропсы?

Ответы (2 шт):