Benutzerdefiniertes Design mit [admin-on-rest] [aor-graqhql]

Question

Hier ist meine App.js-Datei, ich sehe keine Änderungen im Design.

import getMuiTheme from 'material-ui/styles/getMuiTheme'; 

import { 
    blue400, blue700, 
    pinkA200, 
    grey100, grey300, grey400, grey500, 
    white, darkBlack, fullBlack, 
} from 'material-ui/styles/colors'; 
import { fade } from 'material-ui/utils/colorManipulator'; 
import spacing from 'material-ui/styles/spacing'; 

const myTheme = { 
    spacing: spacing, 
    fontFamily: 'Roboto, sans-serif', 
    palette: { 
     primary1Color: blue400, 
     primary2Color: blue700, 
     primary3Color: grey400, 
     accent1Color: pinkA200, 
     accent2Color: grey100, 
     accent3Color: grey500, 
     textColor: darkBlack, 
     alternateTextColor: white, 
     canvasColor: white, 
     borderColor: grey300, 
     disabledColor: fade(darkBlack, 0.3), 
     pickerHeaderColor: blue400, 
     clockCircleColor: fade(darkBlack, 0.07), 
     shadowColor: fullBlack, 
    }, 
} 

class App extends Component { 

    constructor() { 
     super(); 
     this.state = { restClient: null }; 
    } 
    componentWillMount() { 
     buildApolloClient() 
      .then(restClient => this.setState({ restClient })); 
    } 

    render() { 
     if (!this.state.restClient) { 
      return <div>Loading</div>; 
     } 

     return (
      <Admin 
       title="Cruceritis HQ" 
       restClient={this.state.restClient} 
       customReducers={{ theme: themeReducer }} 
       theme={getMuiTheme(myTheme)} 
       customSagas={sagas} 
       customRoutes={customRoutes} 
       authClient={authClient} 
       dashboard={Dashboard} 
       loginPage={Login} 
       appLayout={Layout} 
       menu={Menu} 
       messages={translations} 
       locale="es" 

      > 
       <Resource name="Customer" list={VisitorList} edit={VisitorEdit} remove={VisitorDelete} icon={VisitorIcon} /> 
       <Resource name="Command" list={CommandList} edit={CommandEdit} remove={Delete} icon={CommandIcon} options={{ label: 'Orders' }} /> 
       <Resource name="Product" list={ProductList} create={ProductCreate} edit={ProductEdit} remove={Delete} icon={ProductIcon} /> 
       <Resource name="Category" list={CategoryList} edit={CategoryEdit} remove={Delete} icon={CategoryIcon} /> 
       <Resource name="Review" list={ReviewList} edit={ReviewEdit} icon={ReviewIcon} /> 
       <Resource name="Segment" list={SegmentList} icon={SegmentIcon} /> 
       <Resource name="CommandItem" /> 
      </Admin> 
     ); 
    } 
} 

export default App; 

Ich bin ratlos, was ich tun könnte falsch ...

Ich habe versucht, darkTheme importieren und auch nicht

funktioniert Was soll ich beheben?

Answer 1

Sie scheinen nicht das Thema anwenden. Sie müssen diesen Ansatz folgen (für v0.x):

import React from 'react'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import App from './App'; 

const myTheme = { 
    palette: { 
    primary1Color: 'red', 
    }, 
} 

const Main =() => (
    <MuiThemeProvider muiTheme={getMuiTheme(myTheme)}> 
    <App /> 
    </MuiThemeProvider> 
); 

export default Main; 

In Zukunft Sie ein vereinfachtes Beispiel liefern könnte, die nach wie vor das Problem exibits, enthält aber weniger Lärm.