Question

我是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;
  }
}

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

Answer 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')
);

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

例如

{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>

Answer 2

如果您使用React应用程序，则可以创建index.css文件并为主体设置所需的属性。然后，您必须将index.css文件导入到index.js文件中，然后进行更改。

Answer 3

我使用这种方法：

var bodyCSS = document.createElement("style"); // Create a <style> element
var theCSS = document.createTextNode( // insert <body> css rules as a text node
"body {background: blue; color: white;}" +
"element {/* rest of body css */}");       
bodyCSS.appendChild(theCSS); // Append the text to <style>
document.body.appendChild(bodyCSS); // Append <style> to <body>

这样，您就不需要style.css文件。

Answer 4

根据问题来判断，任务是否像在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}`

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

我希望这会有所帮助：）

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

4 个答案: