我正在使用 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"
],
然后我尝试更改文件的目录,但没有更改。
有人知道为什么这种压倒一切的风格不起作用吗?
任何帮助将不胜感激。
最佳答案
您的 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>
);
};
关于reactjs - 情感风格不是压倒一切的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67881189/