Should i use normal tag when i am using style component?

user_13782055 0
Viewed 802

As I mentioned in the title, Do I should use a normal tag html when i am using Style Component? For example:

My div is styled in Styled Component and if I have a p tag inside it, should i styled this p tag as well? or i can just have a normal tag and 'style component tag'
styled-components reactjs components styles
2 Answers

I sometimes mix both. For example,

import React from 'react';
import styled from 'styled-components';

const Box = styled.div `
  background-color: black;
  padding: 2rem;

  h3 {
    color: orange;
  }

  p {
    color: white;
  }
`

export const InfoBox = () => {
  return (
    <Box>
      <h3>Information</h3>
      <p>An example of paragraph text</p>
    </Box>
  );
};

In this example <h3> and <p> are both normal html tags, whilst <Box> is a styled component. And as you can also see in this example, the <h3> and <p> tags can still be styled with css (as long as they are children of <Box>).

user_61720690

With styled-components you are basically styling only a single html element or react component at a time.

const StyledDiv = styled.div``;
const StyledMyComponent = styled(MyComponent)``;

This creates and returns a react component. Every react component has an implicit children prop, so you use your StyledDiv to wrap any other element in JSX, it doesn't really matter much.

<StyledDiv>
  <p>This is my p-tag text wrapped in my styled div-tag</p>
  <StyledP>This is my styled p-tag text wrapped in my styled div-tag</StyledP>
</StyledDiv>

You only need style a <p> if you need it to be styled, otherwise it doesn't matter since the child element/component can be any valid JSX element.

user_86908570
Related