Материал-ui: darkTheme не влияет на обернутых детей

Question

Мой вопрос очень прост, я хочу использовать DarkTheme Material-ui в части моего приложения. Вот пример кода:

<div> 
    <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> 
    <div> 
     <AppBar title="I am dark" /> 
     <MyCustomComponent label="I should be dark but I am not" /> 
    </div> 
    </MuiThemeProvider> 
    <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}> 
     <p>I am in the lightBaseTheme (default theme)</p> 
    </MuiThemeProvider> 
</div> 

Первая часть приложения должна быть в темной теме (это меню слева), то вторая часть в свете темы (это само приложение).

The AppBar, который является прямым потомком MuiThemeProvider действительно темно, однако, MyCustomComponent и его дети (даже если они являются базовыми Материальным-компонентами пользовательского интерфейса, таких как RaisedButton), не используя темную тему.

Каков самый простой способ иметь MyCustomComponents и все его дочерние элементы, чтобы использовать темную тему?

Answer 1

Вам нужно обернуть все внутри MuiThemeProvider в один элемент.

<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> <div> <AppBar title="I am dark" /> <MyCustomComponent label="I should be dark but I am not" /> </div> </MuiThemeProvider>

на самом деле вы должны были иметь ошибку как

MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Конечно только Material-UI компоненты внутри вашего MyCustomComponent будут тематические внешний вид. Все остальное вам нужно сделать вручную: в пути, показанный Джефф McCloud или с помощью контекста, как это:

function MyCustomComponent (props, context) { 
    const { palette } = context.muiTheme; 
    // Now you have access to theme settings. for example: palette.canvasColor 
} 

MyCustomComponent.contextTypes = { 
    muiTheme: React.PropTypes.object.isRequired, 
}; 

Еще один способ стилизовать простой HTML или React компонента, чтобы обернуть их в react-theme-provider. Как это:

import ThemeProvider from 'react-theme-provider'; 

<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> 
    <div> 
    <AppBar title="I am dark" /> 
    <ThemeProvider> 
     <MyCustomComponent label="I should be dark and I am!" /> 
    </ThemeProvider> 
    </div> 
</MuiThemeProvider> 

ссылка: https://github.com/callemall/material-ui/blob/master/src/styles/MuiThemeProvider.js#L7

Answer 2

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

import React from 'react'; 
import muiThemeable from 'material-ui/styles/muiThemeable'; 

class MyCustomComponent extends React.Component { 
// ... your component will now have access to "this.props.muiTheme" 
} 


export default muiThemeable()(MyCustomComponent); 

ссылка: http://www.material-ui.com/#/customization/themes