Реагировать Starter Kit и материал интерфейса: UserAgent должны быть поставлены в контексте muiTheme для серверной части рендеринга

Question

С React Starter Kit, я добавляю Material UI следующим образом:

npm install material-ui --save 

и следующий импорт в качестве компонента:

import RaisedButton from 'material-ui/lib/raised-button'; 

и:

<RaisedButton label="Default" /> 

Я получаю следующее сообщение об ошибке:

Warning: Material-UI: userAgent should be supplied in the muiTheme context for server-side rendering.

Согласно Материал UI, documentation, он говорит, что я должен был бы обратить внимание на три вещи:

1. autoprefixer и агент пользователя
2. process.env.NODE_ENV

Что код, который я должен ввести и где именно, в частности, с помощью набора для запуска React Starter Kit?

P.S. this solution не работает для меня: -/

Answer 1

Это работает для меня. Добавьте к этому server.js:

global.navigator = { userAgent: 'all' }; 

Затем убедитесь, что вы видите несколько префиксов поставщика, используемые как в этом Screengrab показывая -webkit и -ms как используется:

Answer 2

Попробуйте добавить global.navigator = { userAgent: 'all' }; в начало вашего файла server.js (точка входа в Node.js).

Answer 3

Это должно исправить это

import themeDecorator from 'material-ui/lib/styles/theme-decorator'; 
import RaisedButton from 'material-ui/lib/raised-button'; 
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme'; 

class MyComponent extends Component { 
render() { 
    return (<RaisedButton label="Default" />); 
    } 
} 

export default themeDecorator(getMuiTheme(null, { userAgent: 'all' }))(MyComponent); 

Answer 4

When using Material-UI with server rendering, we must use the same environment for the server and the client. This has two technical implications.

, как вы видели на MaterialUI documentation страница

Вам необходимо предоставить тот же пользовательский агент как для контекста сервера, так и для браузера, как вы видели его в документации, но я категорически препятствую вам предоставлять «все» пользовательский агент, поскольку вы будете обслуживать много ненужного кода для своего конечный пользователь.

Вместо этого вы можете легко следить за документом MaterialUI и передавать значение пользовательского агента, содержащееся в http request headers.

С заявленными или коа сервер

global.navigator = global.navigator || {}; 
global.navigator.userAgent = req.headers['user-agent'] || 'all'; 

Я просто проверил it has been added to the ReactStarterKit (не проверял сам) в src/server.js

global.navigator = global.navigator || {}; 
global.navigator.userAgent = global.navigator.userAgent || 'all'; 

Answer 5

Если вы используете сервер KoaJS вы должны установить koa-useragent, а затем использовать это до рендеринга на стороне сервера:

global.navigator = global.navigator || {}; 
    global.navigator.userAgent = this.state.userAgent.source || 'all'; 

Это сработало для меня!

Answer 6

Рабочим (и надёжным) решение для меня коротко и просто:

getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' }) 

Пример (из моего тестового приложения):

<MuiThemeProvider muiTheme={getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' })}> 
    <Provider store={store}> 
     <MyApplication/> 
    </Provider> 
</MuiThemeProvider>