How to target child element in styled components

Solution

To target child element in styled components, you have pass styled components & p and & span.

Snippet

In this snippet, we will use styled components, with target child element,& p {color: red;},and & span{font-weight:bold;} to change font color.

const Header = styled.header`
  padding: 10px;
  margin: 0 auto;

  & p {
    color: red;
  & span {
      font-weight: bold;
    }
  }

Example

In this example, we will styled componets library and create target child element using styled css, & p {color: red;}, & span{font-weight:bold;}. then use target child element and change the font color and weight.

Let’s start coding…

App.js

import styled from "styled-components";

const Header = styled.header`
  padding: 10px;
  margin: 0 auto;

  & p {
    color: red;
  & span {
      font-weight: bold;
    }
  }
`;

const Example4 = () => {
  return (
    <Header>
      <h2>Ages Blog</h2>
    <p>Ages BlogAges BlogAges <span>BlogAges BlogAges</span> BlogAges Blog</p>
      </Header>
  );
};

export default Example4;

Output

Links

Here, we are provided code sandbox links for the above program target child element in styled components. then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.