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

Я создаю приложение, используя response-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);

введите здесь описание изображения

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


reactjs javascript css css-in-js jss
person Thiago Loddi    schedule 15.01.2019    source источник
comment
Я бы рекомендовал вам создать файл с именем global.css и поместить туда все ваши глобальные стили. Позже просто потребуйте его в своем index.js и все. Нет необходимости добавлять в проект еще одну зависимость, чтобы просто добавить стили к элементу body. Но решать только вам.   -  person Errorpro    schedule 15.01.2019

Ответы (2)


arrow_upward
9
arrow_downward

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

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

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

person Oleg Isonen    schedule 15.01.2019

arrow_upward
1
arrow_downward

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

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. (кто-нибудь поправьте меня, если я ошибаюсь)

person Thiago Loddi    schedule 15.01.2019