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

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

0 голосов
/ 15 декабря 2018

Я новичок в 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 ]

0 голосов
/ 15 декабря 2018

С 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>
0 голосов
/ 15 декабря 2018

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

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.

0 голосов
/ 15 декабря 2018

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

...