Question

如何使用样式化的组件主题全局覆盖默认标题？
对于颜色，我正在做：

import React from "react";
import { ThemeProvider } from "styled-components";

const theme = {
  colors: {
    main: "#8563FF",
    mainLight: "#AB93FF",
    .....
  }
};

const Theme = ({ children }) => (
  <ThemeProvider theme={theme}>{children}</ThemeProvider>
);

export default Theme;

在我的组件中，我通过道具获得了这些颜色

${props => props.theme.colors.main}

我想覆盖默认标题，例如。 h1 ，其中包含我自定义的fontSize，weight ...，因此当我在组件中使用它时，它看起来像这样：

const StyledH1 = styled.h1`
  /* additional local styling for overwritten h1 */
  color: ${props => props.theme.colors.main};
  marginTop: 20px;
`;

最重要的是，它应该在覆盖的标题中包含媒体查询。
如何为主题添加覆盖？

Answer 1

您应使用createGlobalStyle并确保其为ThemeProvider的孩子。

一个帮助函数，用于生成特殊的StyledComponent，该处理全局样式。

const GlobalStyle = createGlobalStyle`
  h1 {
    color: ${props => props.theme.colors.main};
    margin-top: 20px;
  }
`

// will have margin-top
styled.h1``

<ThemeProvider>
  <GlobalStyles />
</ThemeProvider>

Answer 2

您可以使用 createGlobalStyle 创建重置样式，并将其放置在项目的根目录中。

例如，这里是所有 HTML 属性的 重置样式 ，您可以将其导入根索引文件，然后在项目中，将重置所有默认样式的HTML标签。 （（诸如<p>或<h1>的边距之类的样式）

您可以进行一些修改以设置某些属性的默认值，例如<p>，<h1>或其他颜色的默认颜色

reset.css示例

https://gist.github.com/DavidWells/18e73022e723037a50d6

https://cssreset.com/scripts/eric-meyer-reset-css/

样式化的组件-覆盖默认标题

2 个答案: