Как я могу передать свою пользовательскую тему из реактивного проекта с material-ui к равной, но в которой только повторно используемые компоненты передаются в свернутом виде? - PullRequest
Новая
       23

Как я могу передать свою пользовательскую тему из реактивного проекта с material-ui к равной, но в которой только повторно используемые компоненты передаются в свернутом виде?

0 голосов
/ 19 сентября 2019

Я хочу повторно использовать компоненты реактивного проекта, которые передаются в свернутом виде.Каждый из компонентов имеет функцию «makeStyles» для material-ui, которая настраивается там, где они называются.

В настоящее время у меня есть проект, и я хочу использовать эти компоненты, но, несмотря на тот факт, что я включаю ThemeProviderЯ не читаю свойства, такие как цветовые палитры, и использую свойство с материалом-ui по умолчанию.

У меня есть проект компонента многократного использования в корне нового проекта.Я добавил его как локальную зависимость, а затем провожу тестирование, включающее некоторые из повторно используемых компонентов, таких как кнопка.

Это хорошо отрисовывает меня, даже с учетом свойств, которые можно использовать повторно, компонент многократного использования (кнопка)читает их мне, и это работает.Но он не использует никаких пользовательских свойств темы.

Código del botón (проект Commons) 

const useStyles = makeStyles( theme => {
  console.log(theme); // <-- no theme custom variables
  return {
    root: {
      width: '100%',
    },
  };
});


const Button = (props) => {
    const { title, outlined, theme, color } = props;
    const classes = useStyles(props);

    return (
        <Button variant="contained"               
                {...props}>
            { title }
        </Button>
    );
};

Código que llama al botón (новый проект) 

import React, { useState } from 'react';
import { ThemeProvider} from '@material-ui/styles';
import { Button} from 'commons-lib';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
    <div className="App">
      <Button id="btn12" color="primary" title="Aceptar" size="medium" />
    </div>
    </ThemeProvider>
  );
}

export default App;

code theme 

const theme = createMuiTheme({
    palette: {
        primary: purple,
        secondary: {
            light:'#b1b',
            main:'#066',
            dark:'#838',
            contrastText: '#fff'
        }
    }
  },
});

export default theme;

Он не использует определенную мной палитру, а использует палитру по умолчанию.Из консоли я вижу, что свойства themeprovider верны, но в кнопке console.log появляется палитра по умолчанию.

Я хочу, чтобы вы использовали палитру, внедряемую из нового проекта.

1 Ответ

0 голосов
/ 21 сентября 2019

Проблема возникает из-за того, что корневой проект использовал «@ material-ui / styles» проекта «commons-lib», поэтому последний установил тему по умолчанию.

Решением было сделать 

npm link commons-lib/node_modules/@material-ui/styles

из корневого проекта.

...