web-dev-qa-db-fra.com

Module introuvable: impossible de résoudre «matériel-interface utilisateur / styles / couleurs»

J'ai le code suivant, qui n'est pas compilé:

import React from 'react';
import { AppBar, Toolbar } from 'material-ui';
import { Typography } from 'material-ui';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {cyan, red} from 'material-ui/colors';
import { red400 } from 'material-ui/styles/colors';


const theme = createMuiTheme({
  palette: {
    primary: red400,
    secondary: cyan, 
  },
});

const View = (props) => (
  <MuiThemeProvider theme={theme}>
    <AppBar position="static">
      <Toolbar>
      <Typography variant="title">
        {props.title}
      </Typography>          
      </Toolbar>
    </AppBar>
  </MuiThemeProvider>
);
export default View;

Ça dit:

Failed to compile
./src/Dashboard/AppBar/Views/View.js
Module not found: Can't resolve 'material-ui/styles/colors' in '/home/developer/Desktop/react-reason/example/src/Dashboard/AppBar/Views'

Qu'est-ce que je fais mal?

javascriptreactjsmaterial-ui
9
zero_coding

Déplacer la discussion dans les commentaires ici:

Assurez-vous d'installer la version next de material-ui:

npm install material-ui@next

Cette déclaration d'importation est incorrecte:

import { red400 } from 'material-ui/styles/colors'

Cela doit être comme:

import red from 'material-ui/colors/red';

Ici, red est ce que les docs appellent un "objet couleur". Vous pouvez ensuite l'utiliser pour créer votre objet thème comme ceci:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: red[500], //OR red['A400'] for the accent range
      contrastText: '#fff', // The text color to use
      // You can also specify light, dark variants to use (it's autocomputed otherwise)
    }
    //You can also just assign the color object if the defaults work for you
    secondary: red,
    error: red
    //tonalOffset
    //contrastThreshold

  },
});

Dans le code ci-dessus, les touches primarysecondary et error acceptent soit un objet de couleur OR une 'intention de palette' qui est un objet qui ressemble à ceci:

interface PaletteIntention {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
};

La seule clé requise est main. Le reste est calculé automatiquement à partir de la valeur de main s'il n'est pas fourni.

Référence:

Les documents ont une section détaillée sur les thèmes qui explique tout cela en détail .

9
Chirag Ravindra