Styled components inside JSX-CodePudding

I want to make my code cleaner and set a styled component inside JSX code... Example:

const MyDiv = styled.div`background-color: red;`;

const MyComponent = () => { return (
<div>
  <h1>Title</h1>
  <MyDiv>
    Some stuff...
  </MyDiv>
</div>
)}

Is there a way to insert the MyDiv direct inside the JSX code, or do I need to declare it on the component?

CodePudding user response：

I think you should declare it on the component. if you don't want to declare it on the component, you can insert it directly as div

Here is an example of it. Please check below.

const MyComponent = () => { return (
<div>
  <h1>Title</h1>
  <div style={{backgroudColor: 'red'}}>
    Some stuff...
  </div>
</div>
)}

CodePudding user response：

If you want your seamless effect, make a new component file for your div, style it the way you want in there, then import your new div at the top of the file.