Question

我正试图习惯于在react中使用样式化组件。但这似乎并非一直都有效。我目前正在项目中使用它。尽管它在某些组件中可以完美工作，但在某些其他样式中却不应用样式。这是我的代码不起作用的地方。我在单独的文件（ card.js ）和文件夹（ style ）中创建了样式组件，并像这样导出它们；

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}

反应样式化的组件，不对组件应用样式

1 个答案: