Как стилизовать тег тела с помощью подхода CSS-in-JS?
Я новичок в CSS-in-JS и эмоциях и пытаюсь портировать приложение sass-реакции на эмоции. С самого начала у меня уже есть проблема, заключающаяся в том, что я не знаю, как стилизовать тег 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;
}
}
Есть ли какие-нибудь передовые практики, которые охватывают это?
Но позволяет ли это использовать переменные внутри стиля? Если да, не могли бы вы дать ответ с полным эквивалентным кодом? Это было бы очень полезно, чтобы полностью осмыслить это!
Запишите тело CSS в переменную, создайте элемент стиля и добавьте его в тело. Для этого вам не нужен file.css.
Ответы 3
Если вы используете приложение для реагирования, вы можете создать файл index.css и установить желаемые свойства для тела. Затем вы должны импортировать файл index.css в свой файл index.js, и изменения вступят в силу.
Значит, нет специального способа сделать это с помощью CSS-in-JS? Для стилизации тела требуется отдельный файл css / scss, независимо от того? Создание отдельного файла только для тела кажется расточительным ...
Какое решение ... если вы хотите добавить стиль в тело в соответствии с определенной темой, которую вы знаете только в js?
С помощью Emotion вы можете настроить что-то, например, в следующем примере приложения create-response-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>
createGlobalStyle раньше было injectGlobal, кстати
Интересный. Итак, я предполагаю, что этот <React.Fragment> нужно разместить внутри компонента <App />, который переходит к функции ReactDOM.render ()? Несмотря на то, что этот ответ не об эмоциях, я буду поддерживать его, потому что это самый полезный ответ! Есть ли в эмоциях что-то подобное?
Ой, я прочитал это слишком быстро. У Emotion есть свой способ сделать это, поскольку он во многом вдохновлен style-components. Я отредактирую свой ответ
дайте мне знать, если это проясняет ситуацию, и я буду признателен, если вы примете мой ответ, если это так! Удачи
Ну, вообще-то, я уже читал об этом в документации, но мне это не совсем понятно. В React методы рендеринга всегда находятся внутри компонента, значит, это глобальный метод рендеринга, зависящий от эмоций? Будет ли это работать с переменными? Как бы выглядел мой код (см. Вопрос) с переменной? Эти документы не совсем детально проработаны ...
@DavidDeprost то, что вы предоставили, минимально, поэтому при попытке ответить на этот вопрос было сложно. Думаю, ваш вопрос сейчас в основном касается правильного синтаксиса приложения React.
@DavidDeprost Функция рендеринга обычно оборачивается в какой-то класс, как обычно. В этом случае Emotion создает так называемый компонент высокого порядка (HOC), который помогает вам не беспокоиться о написании слишком большого количества функций. Надеюсь, вы примете мой ответ после того, как я отредактирую для ясности
Спасибо большое за вашу помощь. Все заработало благодаря тебе. Я отредактировал ваш ответ, чтобы дополнить / улучшить его. Теперь он работает как есть. Если редактирование вас устраивает, я приму ответ.
Добро пожаловать - рад, что теперь это работает на вас. Редактирование одобрено, спасибо за принятие моего ответа
В соответствии с вопросом, если задача такая же мала, как изменение цвета фона тела в 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}`
Помните, что, следуя второму подходу, вы можете перезаписать стиль всего тела, поэтому позаботьтесь об этом.
Надеюсь, это поможет :)
Я просто использую document.body.style. Не чинить то, что не сломано, лол