Я просто разработал ответ Олега, вот что я сделал:
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
. (кто-то поправит меня, если я ошибаюсь)
Вы свободны вручную создать папки сами и переместить файлы. Я соглашаюсь, что это - намного более удобный способ расположить файлы, но AFAIK, там не способ заставить VS сделать это автоматически.
Можно создать Плагин Visual Studio, чтобы сделать это. Я не уверен, как можно получить доступ "к Проводнику Решения" программно.