styled-components

const Label = styled.div`
     color: blue;
`
const InputWrapper = styled.div`
    & .Label: {
       color: green;
    }
`
const Container = styled.div`
    & .Label: {
       color: red;
    }
`
<Container>
   <InputWrapper>
     <Label className="Label">some text</Label>
     <input />
   </InputWrapper>
</Container>

import styled, { DefaultTheme, ThemeProps } from 'styled-components';
interface MyProps extends ThemeProps<DefaultTheme> {
  isActive?: boolean;
}
const MyComponent = styled.div<MyProps>((props: MyProps) => {
  return {
   color: props.theme.primary,
    "::before": { .. }
  }
}

/**
 * This interface can be augmented by users to add types to `styled-components`' default theme
 * without needing to reexport `ThemedStyledComponentsModule`.
 */
// ...
export interface DefaultTheme {}

const Foo = styled.div`
background-image: URL(/image.webp);
:global(html.no-webp) {
background-image: URL(/image.jpg);
}
`

const Button = styled.button((props) => `
  color: ${props.color};
  border: 2px solid ${props.border};
  background: ${props.background};
`);