How can I css style a child react component?


In simple HTML structure I can achieve it as following. I’d like to know how can I do the same with React and Styled Component.

HTML

  <div className="slider">
    <section>Content A</section>
    <section>Content B</section>
  </div>

And I can target the styling of the section like this.

.slider section {
  //some styling
};

How can I achieve the same in React with Styled Component. In this case, my slider div is a styled component and the section is a React component as following.

  <Slider>
    <SectionComponent text="Content A />
    <SectionComponent text="Content B" />
  </Slider>

This is what I tried, within the Slider CSS code block I tried styling the SectionComponent but doesn’t work.

Styled Component CSS

export const Slider = styled.div`
  //some css styling

  Slider SectionComponent {
    //styling of the SectionComponent
  }
`;

Source: CSS – Stack Overflow

November 25, 2021
Category : News
Tags: css | html | javascript | reactjs | styled-components

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.