For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt, and this page is available as Markdown at /zh/apis/app/runtime/utility/css-in-js.md.
  • 简体中文

      • CSS-In-JS API

      使用 Style Component 来编写组件 CSS。

      使用姿势

      import styled from '@modern-js/plugin-styled-components/styled';

      函数签名

      请看 styled-component API。

      示例

      import styled from '@modern-js/plugin-styled-components/styled';

const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
`;

const TomatoButton = styled(Button)`
  background: tomato;
`;

function ButtonExample() {
  return (
    <>
      <Button>I'm purple.</Button>
      <br />
      <TomatoButton>I'm red.</TomatoButton>
    </>
  );
}