Question

我想知道是否有可能将样式从styled-components转换为包装元素，例如<body>标记，如下所示：

class SomePageWrapper = styled.div`
  body {
    font-size: 62.5%
  }
`

Answer 1

事实证明 - 您无法将样式化组件设置为外部元素。这违反了封装的理念 - 来自styled-components的好处。

所以这样做的方法是通过带有body的父组件中的JS向名为classList的{{1}}元素添加一个新类，并将其与componentDidMount()一起删除

Answer 2

不，但你可以使用全局注入功能在你的身体上设置东西：

import { injectGlobal } from 'styled-components';

injectGlobal`
  @font-face {
    font-family: 'Operator Mono';
    src: url('../fonts/Operator-Mono.ttf');
  }

  body {
    margin: 0;
  }
`;

示例来自此处：https://www.styled-components.com/docs/api#injectglobal

Answer 3

我认为你做不到。

class SomePageWrapper = styled.body`
  font-size: 62.5%
`

因此，当您将<SomePageWrapper/>放入渲染时，它会变为<body></body>。然后您需要将其放在根部分中，以替换<body>。

但是如何替换<body>中的index.html。当你无法替换它时，你将在浏览器中结束两个<body>，或者会发生奇怪的事情。

只需使用css文件

即可

Answer 4

对于v4 样式化的组件，请使用createGlobalStyle。

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

// later in your app

<React.Fragment>
  <GlobalStyle whiteColor />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>

我可以设置样式来从样式组件中记录正文吗？

4 个答案: