Блог

Главная - Вопросы по программированию - Как использовать один и тот же компонент в React несколько раз, но с разным CSS на разных страницах

Как использовать один и тот же компонент в React несколько раз, но с разным CSS на разных страницах

#reactjs

Вопрос:

Я создал отдельный файл с некоторыми данными и импортировал их в разные файлы. С помощью функции карты я печатаю эти данные в

  • метка. Но я хочу использовать эти данные на разных страницах с разным CSS, например, на некоторых страницах мне нужны изменения цвета или другой размер шрифта. Никаких событий не требуется. Просто хочу печатать данные одного и того же компонента, но с разным CSS на каждой странице. 
         `const Truck = [
    {
        icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
        text: "Door pick-up and delivery",
    },
    {
        icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
        text: "Heavy weight shipments",
    },
    {
        icon: <i className="fa fa-truck fa-flip-horizontal"></i>,
        text: "Same day delivery in city limits",
    },
]
export default Truck`................

Map function

}`export const UlServicesItems = () => {
    return (
        <div id="UlMarginTop">
            {Truck.map((item, index) => {
                return (
                    <div id="txt">
                        <li key={index} className="iconTruck">{item.icon}</li>
                        <li key={index} className='newId'>{item.text}</li>
                    </div>

                )
            })}
        </div>`enter code here`
    )

    • Комментарии:

    1. Используйте реквизиты для компонента, чтобы указать ему, какой стиль он должен иметь

    2. Ты проверил мой ответ? Подумайте о том, чтобы дать несколько отзывов!

    Ответ №1:

    Вы могли бы определить какую-то тему и передать ее в качестве реквизита своему компоненту.

    Сначала создайте несколько классов CSS.

     .bg-green {
  background-color: green;
}

.bg-red {
  background-color: red;
}

.big-text {
  font-size: 20px;
}

    В родительском компоненте определите темы и передайте их в качестве реквизитов компонентам.

     import "./styles.css";
import Card from "./Card";

export default function App() {
  const theme = {
    backgroundclass: "bg-green",
    textclass: "big-text"
  };

  const theme2 = {
    backgroundclass: "bg-red",
    textclass: "big-text"
  };

  return (
    <div className="App">
      <Card theme={theme} />
      <Card theme={theme2} />
    </div>
  );
}

    В своем дочернем компоненте используйте опору темы и установите значения для соответствующих элементов.

     export default function Card({theme}) {
  return (
    <div className={theme.backgroundclass}>
      <p className={theme.textclass}>hello</p>
    </div>
  );
}

    Ссылка на песочницу

    Метки: ,