How to apply styles to multiple components using styled components

Joy Lee

I've created a icon.js file. It exports 3 SVG components to different files. Like this :

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

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

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

And I would like to apply the same styles to all three of these components using styled components, not giving them a same className. Is there a solution for that? Thank you :)

Neha Jha

I think the following steps could help you.

Steps

  1. npm i [email protected]
  2. import styled from '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. Now use StyledSvg that you just created instead of the svg tags.
    return(
        <StyledSvg>
        ...
        </StyledSvg>
    );

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to create shared styles using styled components?

How to apply the same props to multiple styled components?

How to add multiple styles based on property with styled-components?

Can not apply styles to custom components in React Native using styled-components?

How to override third party default styles using Styled Components

How to extend Link and NavLink with same styles using Styled Components

Styled components not applying styles

How to do overlapping styles with Styled Components React?

Multiple nested components in styled components

React styled-components not applying styles to components

Where to put styled components styles

How to apply local styles to imported React components

Overwriting nested styles in React Bootstrap using Styled-Components

How to add styles using styled-components to programatically created heading with dynamic level?

How to import Ant Design css styles in GlobalStyles of styled-components.?

styled-components - how to set styles on html or body tag?

Using animation in styled components

How to create an Arrow using styled-components

How to style react styled components using classNames

How to refer to other Styled Components when using MUI styled function and Styled Components?

Apply radiobutton color using styled-components in Material UI?

How to merge two styled-components which are in different base components but have similar styles?

Change inline styles to styled-components

Overriding react components styles with styled component

idiomatic way to share styles in styled-components?

Extending styles with styled-components not working

Multiple Props Options for Styled Components

Using props in React with styled components across components

Styling nested components using styled components