Emotion — apply styling on Component selectors

I tried to do this to apply styling through component selector instead of doing css selector > div.

const Text = styled.div`
  color: red;
`

const Container = styled.div`
  ${Text} {
    color: red;
  }
`

Then I got this error.

Solution

• install @emotion/babel-plugin as dev dependency
• added @emotion/babel-plugin in next-twin.js

Another Solution

use

import styled from "@emotion/styled/macro";

instead of

import styled from "@emotion/styled";

Reference

Component selectors can only be used in conjunction with babel-plugin-emotion error while using…