如何使用 CSS-in-JS 方法设置 body 标签的样式？

Posted 2023-03-06

【中文标题】如何使用 CSS-in-JS 方法设置 body 标签的样式？

【英文标题】：How to style body tag with CSS-in-JS approach?

【发布时间】：2019-05-16 15:30:01

【问题描述】：

我是 CSS-in-JS 和情感的初学者，并试图将一个 sass react 应用移植到情感上。从一开始我就已经遇到了不知道如何设置 body 标签样式的问题。

人们通常使用document.body.style 来执行此操作吗？我在任何地方都找不到这个...

假设我想将以下代码移植到情感上，那将如何实现？

$bodyFillColor: rgb(218, 236, 236);

body 
  margin: 0;
  padding: 0;
  min-height: 100vh;
  max-width: 100vw;
  background-color: $bodyFillColor;
  .noScroll 
    overflow: hidden;
  

是否有任何涵盖此方面的最佳实践？

【问题讨论】：

我只使用 document.body.style。不要修复没有损坏的东西大声笑

但这是否允许在样式中使用变量？如果是这样，您能否提供完整等效代码的答案？这将非常有用，可以让我完全了解它！

将 body css 写入变量，创建样式元素，并将其附加到 body。你不需要 file.css。

【参考方案1】：

使用 Emotion，您可以设置一些东西，例如以下 create-react-app 示例，以注入全局样式：

import React from 'react';
import ReactDOM from 'react-dom';
import  Global, css  from '@emotion/core'

const bodyFillColor = `rgb(218,236,236)`;

class App extends React.Component 
  render() 
    return(
      <div>
        <Global
          styles=css`
            body 
              background: $bodyFillColor;
              margin: 0;
              padding: 0;
              min-height: '100vh';
              max-width: '100vw';
            
          `
        />
        <Global
          styles=
            'body.noScroll': 
                // Prevent scrolling; conditionally activate this
                // in subcomponents when necessary ...
                overflow: 'hidden',
            ,
          
        />
      </div>
    );
  


ReactDOM.render(
  <App />,
  document.getElementById('root')
);

这显示了一个在 body 上注入样式并为 body 分配一个可以在以后有条件地激活的类的示例。

例如。

this.state.activate && <Global styles=`stylesetc`/>

https://emotion.sh/docs/globals

替代方案

StyledComponents 使用 CSS-in-JS 方法，非常适用于 React 应用程序。这是我过去直接从文档中使用的一种技术：

import  createGlobalStyle  from 'styled-components'

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

// later in your app

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

【讨论】：

createGlobalStyle 曾经是 injectGlobal，顺便说一句

有趣。所以我猜这个 需要放在一个 组件中，该组件会转到 ReactDOM.render() 函数？尽管这个答案与情感无关，但我会投赞成票，因为它是迄今为止最有用的答案！情感有类似的吗？

糟糕，我读得太快了。 Emotion 有它自己的方式来做到这一点，因为它在很大程度上受到样式组件的启发。我会编辑我的答案

让我知道这是否可以解决问题，如果可以的话，我将不胜感激您接受我的回答！祝你好运

非常感谢您的帮助。多亏了你，它工作起来了。我对您的答案进行了编辑以完成/改进它。它现在可以按原样运行。如果你的编辑没问题，我会接受答案。

【参考方案2】：

如果您使用的是 react 应用程序，您可以创建 index.css 文件并为正文设置您想要的属性。然后，您必须在 index.js 文件中导入 index.css 文件，然后更改才会生效。

【讨论】：

所以没有 CSS-in-JS 特定的方法来做到这一点？样式化身体需要一个单独的 css/scss 文件吗？为正文创建一个单独的文件似乎有点浪费......

解决方案是什么......如果你想根据你只在js中知道的特定主题为body添加样式？

【参考方案3】：

根据问题，如果任务与在 js 中更改正文的背景颜色一样小，那么下面的方法也可以在您的代码中最有可能在 App.js 中的任何位置遵循

if(theme==='dark') 
 document.body.style.background = '#000'
else 
 document.body.style.background = '#FFF' 

无需为此使用整个样式库。

我也试过编辑document.body.style，你也可以按照下面的例子试试

if(theme==='dark') 
 bgColor = '#000'
else 
 bgColor = '#FFF'

document.body.style= `background: $bgColor`

请记住，按照第二种方法，您可能会覆盖全身风格，所以请注意这一点。

我希望这会有所帮助:)