Как стилизовать тег body с помощью подхода CSS-in-JS?

Я новичок в CSS-in-JS и эмоциях, и пытаюсь портировать приложение sas реакции на эмоции. С самого начала у меня уже была проблема не знать, как стилизовать тег 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;
  }
}

Разработаны ли еще лучшие практики, которые охватывают это?

Источник

3 ответа

Решение

С Emotion вы можете настроить что-то, как в следующем примере create-реагировать-приложение, для внедрения глобальных стилей:

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>
Источник

Если вы используете приложение реагировать, вы можете создать файл index.css и установить нужные свойства для тела. Затем вы должны импортировать файл index.css в ваш файл index.js, и изменения вступят в силу.

Источник

Я использую этот подход:

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.

Источник

В соответствии с вопросом, если задача такая же мала, как изменение цвета фона тела в 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}`

Помните, что, следуя второму подходу, вы можете перезаписать стиль всего тела, поэтому позаботьтесь об этом.

Надеюсь, это поможет:)

Источник
Другие вопросы по тегам