How to Declare Styled Components Using React Component Class Syntax

Question

How does one declare styled components outside of a React component's render() method when using React class syntax?

My motivation is stateful components being accidentally remounted. They are remounted due to their parents being styled components and declared in the render() method. This causes the parents to be recreated every render, and thus their children's state reseting. This topic is discussed on the styled-components FAQ.

How is that different to the example provided in the docs you linked? Just declare them outside of your class component and render them as usual. — trixn
– trixn, Commented Feb 3, 2019 at 23:13
You can declare them outside of the component and they'll be global. Or in-line. — stever
– stever, Commented Feb 3, 2019 at 23:13

Anil Kumar · Accepted Answer · 2019-02-03 23:14:59Z

1

What we do is create styled component outside render and then user it:

example.jsx // statefull component

const StyledDiv = styled.div `
   .... styles
`;

class Header extends Component {
 render() {
  return (
    ... use StyledDiv here
   );
  };
 } ;

answered Feb 3, 2019 at 23:14

Anil Kumar

2,3192 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dylan Landry Over a year ago

I had not thought of declaring the component completely outside of the parent component's class. I thought all child components needed to be defined inside the parent component for React to correctly determine how to update the DOM.

Anil Kumar Over a year ago

one more pattern I have seen where you can put all these styles components in single file src/components/Styled/example.jsx. Now export and use it in different components. This is good when application grows and re usability is required.

Collectives™ on Stack Overflow

How to Declare Styled Components Using React Component Class Syntax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related