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

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

0 голосов
/ 15 января 2019

Я создаю приложение с использованием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)

Ответы [ 2 ]

0 голосов
/ 15 января 2019

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

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

0 голосов
/ 15 января 2019

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

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

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

...