Как я могу добавить стиль к элементу тела с помощью JSS?

99
16

Я создаю приложение с использованиемact-jss для стилизации моих компонентов и хотел узнать, возможно ли добавить стили к элементам верхнего уровня (таким как html или body).

Чтобы проиллюстрировать это, у меня есть простой компонент NotFound, который я создаю с помощью response-jss. Стиль работает нормально, но проблема в том, что у элементов body есть поле по умолчанию, которое я хотел удалить.

NotFound.js

import React from 'react';
import injectSheet from 'react-jss';

const styles = {
notFound: {
fontFamily: 'Roboto',
backgroundColor: 'blue',
color: 'white'
}
}

function NotFound({ classes }) {
return (
<div className={classes.notFound}>
NOT FOUND
</div>
)
}

export default injectSheet(styles)(NotFound);

enter image description here

Кто-нибудь знает, возможно ли убрать это поле с помощью css-in-js? (Я хотел избежать css)

спросил(а) 2021-01-19T17:32:22+03:00 2 месяца, 3 недели назад
1
Решение
62

Вы можете использовать синтаксис, представленный jss-plugin-global

  '@global': {
body: {...}
}

Также рекомендуем создать отдельный компонент для этого и обернуть его этим. В противном случае ваш конкретный компонент станет менее пригодным для повторного использования.

ответил(а) 2021-01-19T17:32:22+03:00 2 месяца, 3 недели назад
44

Просто чтобы уточнить ответ Олега, вот что я сделал:

1. Создайте свой собственный JssProvider. Примечание: пришлось бы также добавить jss-plugin-camel-case иначе он не будет анализировать мои свойства из camelCase в lisp-case:

import App from './App';
import { create } from 'jss';
import { JssProvider } from 'react-jss';
import globalPlugin from 'jss-global';
import camelCase from 'jss-plugin-camel-case';

const jss = create();
jss.use(globalPlugin(), camelCase());

render(
<JssProvider jss={jss}>
<Router>
<App />
</Router>
</JssProvider>
document.getElementById("app")
);

2.Добавлено мое глобальное свойство в мой компонент верхнего уровня.

import React from "react";

import Main from "./common/ui/components/Main";
import NotFound from "./components/NotFound";
import injectSheet from 'react-jss';

const style = {
'@global': {
body: {
margin: 0
}
}
};

const App = () => {
return (
<Main>
<Switch>
<Route component={NotFound}/>
</Switch>
</Main>
);
};

export default injectSheet(style)(App);

И это было все! Работал как шарм.

РЕДАКТИРОВАТЬ: После некоторого дополнительного исследования я обнаружил, что мне не нужен шаг 1. Просто добавив стиль @global в мой компонент App сделал свою работу. Я предполагаю, что этот jss-global должен быть по умолчанию в react-jss. (кто-то поправит меня, если я ошибаюсь)

ответил(а) 2021-01-19T17:32:22+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема