Как применить стили к нескольким компонентам, используя стилизованные компоненты

Я создал файл icon.js. Он экспортирует 3 компонента SVG в разные файлы. Так :

export const MenuIcon = () => {
  return (
    <svg>
      ...
    </svg>
  );
};

export const ArrowLeftIcon = () => {
  return (
    <svg>
   ...
    </svg>
  );
};

export const SearchIcon = () => {
  return (
    <svg>
      ...
    </svg>
  );
};

И я хотел бы применить одни и те же стили ко всем трем этим компонентам, используя стилизованные компоненты, не присваивая им одно и то же имя класса. Есть ли решение для этого? Спасибо :)

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
155
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что следующие шаги могут помочь вам.

Шаги

  1. npm i стилизованные компоненты@4.1.3
  2. импортировать стили из 'styled-components';

const StyledSvg = styled.svg` <---the html tag that you want to style
  color: palevioletred;       <---the css styles that you want to use
`;  
  1. Теперь используйте StyledSvg, который вы только что создали, вместо тегов svg.
    return(
        <StyledSvg>
        ...
        </StyledSvg>
    );

Другие вопросы по теме