Question

出于好奇，我在我的React应用程序中使用样式化组件，并且在其中使用建议的主题以在所有可用的位置具有所有颜色和大小。

目前，我正在这样做：

export const TestComponent = styled.div`
    color: ${({ theme }) => theme.white};
    background-color: ${({ theme }) => theme.white};
    border: 1px solid ${({ theme }) => theme.white};
    display: ${({ check }) => check ? 'block' : 'none'};
`;

因此，我正在使用ThemeProvider中的主题以及外部组件的其他检查。

我的问题是，为什么我不能这样使用它：

export const TestComponent = styled.div`${({ theme, check }) => (css`
    color: ${theme.white};
    background-color: ${theme.white};
    border: 1px solid ${theme.white};
    display: ${check ? 'block' : 'none'};
`)`;

会不会更方便，更容易使用？如果是这样，为什么他们不建议这样做呢？我只是害怕它有一些巨大的缺点，我现在看不到。

Answer 1

我不认为这两种方法都存在任何问题。我已经在大型React应用程序中大量使用了您在第一个示例中所做的事情，并且没有任何问题。

话虽如此，您的第二个例子是完全正确的。您甚至不需要css助手：

const Test = styled.div`
  ${({ theme }) => `color: ${theme.white};`}
`;

通常，我使用css助手来创建抽象/可共享的CSS块：

const fontSize = css`
  font-size: ${({ small, large, theme }) => {
    if (small) return `${theme.small}rem`;
    if (large) return `${theme.large}rem`;
    return `${theme.normal}rem`;
  }};
`;


const Test = styled.div`
  ${({ theme }) => `color: ${theme.white};`}
  ${fontSize}
`;

然后：

<Test small>Hello World</Test>

主题风格的组件结合了道具和主题

1 个答案: