StyledComponentsExample.js

// yarn add styled-components

import styled from 'styled-components';

export default function() => {
  return (
    <Style>

      <div className="blue">
        This is blue text
      </div>

      <div className="parent">
        This is a parent element
        
        <div className="child">
          This is a child element (red color)
        </div>
      </div>

      <div className="child">
        This is another .child element but normal color;
      </div>
    </Style>
  );
}

const Style = styled.div`
  .blue {
    color: blue;
  }
  
  .parent {
    display: block;
    background: #eee;
    
    .child {
      color: red;
    }
  }
`;