CODEWITHSUNDEEP
reactjsstyled-components
Dylan Landry
Dylan Landry

Reputation: 1290

How to Declare Styled Components Using React Component Class Syntax

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.

Upvotes: 0

Views: 426

Answers (1)

Anil Kumar
Anil Kumar

Reputation: 2309

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
   );
  };
 } ;

Upvotes: 1

Related Questions