情感风格不是压倒一切的组件答案

【问题标题】：Emotion styled not overiding component情感风格不是压倒一切的组件
【发布时间】：2021-08-25 02:27:52
【问题描述】：

我正在使用 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"
  ],

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

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

任何帮助将不胜感激。

【问题讨论】：

标签： reactjs typescript next.js emotion emotion-js

【解决方案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>
      );
};

【讨论】：