嵌套选择器

嵌套选择器是几乎所有的CSS预处理必备的功能,Emotion也不例外。在Emotion中,嵌套选择器可以仿照以下示例来使用。

import { jsx, css } from '@emotion/react';

const paragraph = css`
  color: blue;

  a {
    border-bottom: 1px solid red;
    color: red;
    &:hover {
      border-bottom: 1px solid yellow;
      color: yellow;
    }
  }
`;

function App() {
  return (
    <p css={paragraph}>
      Something:
      <a href="#">links</a>
    </p>
  );
}

Tip

符号&在Emotion中是用来代表本级选择器的。