情感风格不压倒一切

Question

我正在使用 next.js 和 @emotion/styled 制作一个网站。

我有一个卡片组件，如下所示。

import React from 'react';
import styled from '@emotion/styled';

    const Card: React.FC = (props) => {
      return (
          <Container>{props.children}</Container>
      );
    };
    export default Card;
    
    const Container = styled.div`
      padding:36px;
    `

我想覆盖样式并为其添加边框。

import Card from '@/components/atoms/products/Card'
import styled from '@emotion/styled';
const Test: React.FC = () =>{
  return(<BorderedCard/>)
}
export default Test


const BorderedCard = styled(Card)`
  height:300px:
  border: solid 1px #244C95;
`

我导入卡片组件并覆盖它。我预计卡片组件有边框，但该样式不适用于该组件。此方法适用于项目中的其他任何地方，但不适用于此组件。

我怀疑不知何故找不到这个组件，并检查了 ts 配置文件。

  "include": [
    "next-env.d.ts",
    "src/**/*",
    "emotion.d.ts"
  ],

然后我尝试更改文件的目录，但没有改变。

有人知道为什么这种压倒一切的风格不起作用吗？

任何帮助，将不胜感激。

Answer 1

您的Card组件需要有一个 className 属性并将其传递给您的 Container 组件。emotion这是样式化函数正常工作的要求： https ://emotion.sh/docs/styled#styling-any-component 。

const Card: React.FC = (props) => {
      return (
          <Container className={props.className}>{props.children}</Container>
      );
};