Style an imported styled-component

styled-components attrs
styled-components hover
styled components css variables
styled-components theme typescript
styled-components best practices
create-react-app styled-components
styled-components nested elements
styled-components media queries

I have the following Component:

const StyledH3 = styled.h3`
  direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;

const H3 = ({ children }) => (
  <StyledH3 isRTL={isChildrenRTL(children)}>
    {children}
  </StyledH3>
);

export default H3;

And I want to extend it's styles, for example in a different file:

import { H3 } from 'components';

const Title = styled(H3)`
  background-color: red;
`;

How can I achieve this?


You need to expose the className prop on your exported component so it can receive the new className:

const StyledH3 = styled.h3`
    direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;

const H3 = ({ children, className }) => ( // Note - className prop.
    <StyledH3 
        className={className} // Need to add this here 
        isRTL={isChildrenRTL(children)}
    >
        {children}
    </StyledH3>
);
export default H3;

Then you can extend your component styles in a different file as you have suggested:

import H3 from 'components';

const Title = styled(H3)`
    background-color: red;
`;

Reference link https://www.styled-components.com/docs/basics#styling-any-components

Basics, Simple dynamic styling: adapting the styling of a component based on its props or a global If you're familiar with importing CSS into your components (e.g. like​  import styled from 'styled-components' const Button = styled. button ` ` This Button variable here is now a React component that you can use like any other React component! This unusual backtick syntax is a new JavaScript feature called a tagged template literal.


As per the styled-component documentation you should do it like this.

export const StyledH3 = styled.h3`
 direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;
const H3 = ({ children }) => (
  <StyledH3 isRTL={isChildrenRTL(children)}>
    {children}
  </StyledH3>
);
export default H3;

And then in your other file where you need it, do something like this.

import H3, { StyledH3  } from 'components';

const Title = StyledH3 .extend`
  background-color: red;
`;

For reference have a look at the Extending styles in styled-components

Please do note, you can extend a styled-component's style only and not a React dumb component class for styled-component.

Advanced Usage, import { withTheme } from 'styled-components'; class MyComponent extends Using user input as styles can lead to any CSS being evaluated in the user's  Styled components are a way to create react components on the fly using just CSS style definitions. Let's say, we want to display text with a red color. To do that, we call a method of the styled components library to generate that component with the provided style information:


I managed to solve this by utilizing both extend and withComponent methods. So instead of exporting the component I ended up exporting the styled component with all the logic inside it:

const TwoWayP = styled.p`
  direction: ${props => isChildrenRTL(props.children) ? 'rtl' : 'ltr' };
`;

and then extend the styled component and if needed (and I need) change it's tag:

const TwoWayH3 = TwoWayP.withComponent('h3');

const Title = TwoWayH3.extend`
  background-color: red;
`;

So the main part of my solution was to move the logic inside the styled component without a React component

Cannot apply further styles upon importing component · Issue #265 , Title.js import React from 'react' import styled from 'styled-components' // Apply styles to h1 const StyledTitle = styled.h1` font-size: 1.5em;  <ThemeProvider> is part of styled-components, but is required for styled-theming. import { ThemeProvider } from 'styled-components' ; <ThemeProvider> accepts a single prop theme which you should pass an object with either strings or getter functions.


Using styled-components v4 "as" :
h3.js
const StyledH3 = styled.h3`
  color:red;
`;

export const H3 = ({ children }) => (
  <StyledH3>{children}</StyledH3>
);
card.js
import { H3 } from 'components';

const Title = styled.div`
   border-bottom: 1px solid red;
`;

export const Card = (props) => (
  <div>
     <Title as={H3} />   <----- using "as" --------
     <p>...</p>
  </div>
);

Styled Components: Styling for component based application, Now lets write our styles with styled-components. Styled. import styled from '​styled-components'; const Box = styled.div` display: grid; grid  Feature request: Can styled-components add support for nested properties like SCSS #3126 opened Apr 29, 2020 by crazyones110 Same classname applied in SSR


styled-components getting started - styled-components, Ok we can start by migrating our styles into components, let's do one component first to get an idea of where we're going with this. First, import  Angular applications are styled with standard CSS. That means you can apply everything you know about CSS stylesheets, selectors, rules, and media queries directly to Angular applications. Additionally, Angular can bundle component styles with components, enabling a more modular design than regular stylesheets.


Styling in React: From External CSS to Styled Components, import React from "react"; import styled from "styled-components"; Now we have imported an object called styled that we can use to style our  The style definition is built via a JavaScript variable that describes each of the attributes using camel case syntax. The use of camel case is important as CSS defines all attributes in train case .


Styled Components: The Essentials Explained in 3 Steps, Styled Components makes it obvious, as every bit of styling is tied to a specific component. import styled from 'styled-components';. The first way to override the style of the components is to use the inline-style approach. The second way to override the style of the components is to use the css-style approach. Every component provides a className property. Those properties are always applied to the root element.