React样式组件不将样式应用于组件

Question

我正在努力适应react中的组件样式。但它似乎并不总是起作用。我目前正在一个项目中使用它。虽然它在某些组件中工作得很好，但在其他组件中却没有应用这些样式。这是我的代码，它不起作用。我在一个单独的文件(card.js(和文件夹(styles(中创建了样式组件，并像这样导出它们；

import styled from 'styled-components/macro';
export const Title = styled.p`
font-size: 24px;
color: #e5e5e5;
font-weight: bold;
margin-left: 56px;
margin-right: 56px;
margin-top: 0;
`;
... (other components created the same way)

然后，我将它们导入到一个文件(index.js(中，该文件与styles文件夹位于同一文件夹中，包含card.js文件，我在那里这样使用它们；

import React from 'react';
import {Title, (some other components) } from './styles/card';
export default function Card({ children, ...restProps }) {
return <Container {...restProps}>{children}</Container>
}
Card.Title = function CardTitle({ children, ...restProps }) {
return <Title {...restProps}>{children}</Title>;
};

然后我我在所有其他样式的组件文件中都使用了相同的方法，但在这里不起作用。我想知道原因，或者是否有更好的方法来使用样式组件。

Answer 1

想明白了！React样式的组件在正确应用时可以完美工作。问题出在我的代码中
我写了

&{Picture}

调用早期声明的样式组件而不是时

${Picture}