Внедрить реквизиты темы с провайдером Theme во внешние пакеты - PullRequest
Новая
       39

Внедрить реквизиты темы с провайдером Theme во внешние пакеты

1 голос
/ 09 апреля 2020

Я хочу структурировать свой реактивный проект, связывающий мои пользовательские @material-ui компоненты во внешней зависимости, я использую свертку, чтобы сделать это. Создание моей внешней зависимости и публикация ее на npm все работает правильно. Я могу импортировать в свой проект и Theme provider предоставить реквизиты темы для внешних компонентов.

Теперь, чтобы улучшить процесс разработки на основе внешней зависимости, я бы связал свой проект со своей внешней библиотекой, которую я пытался использовать yarn link, кажется, что компоненты связаны правильно, но они не получают реквизиты темы для стилизации компонентов.

Ниже приведен пример структуры моих внешних компонентов: 

import React from 'react';
import { Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    root:{
      padding: 20,
    },
    subtitle:{
      margin:'12px 0',
      color: theme.palette.gray.dark
    }
}));

function ExampleLayout(props){
  const classes = useStyles(props);

  return(
    <div className={classes.root}>
      {props.children}
    </div>
  )
}

Не удается найти цвет: theme.palette.gray.dark (тема не определена) (палитра и другие настройки верны, потому что, если я собираю и публикую sh все работает), проблема заключается в том, что внешние компоненты, содержащиеся в ThemeProvider, отсутствуют получить реквизиты темы;

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

Ваша среда ? Техническая версия Material-UI v4.9.8 React v16.9.0 Browser Chrome TypeScript нет Свернутый 1.27.2 et c.

1 Ответ

0 голосов
/ 10 апреля 2020

Вы можете использовать theme.palette.grey['500'], например, или любую из клавиш: 

50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700

, что в основном дает вам возможность легко контролировать оттенок цвета.

В вашем код это будет: 

const useStyles = makeStyles(theme => ({
    root:{
      padding: 20,
    },
    subtitle:{
      margin:'12px 0',
      color: theme.palette.grey["50"]
    }
}));

Обратите внимание на опечатку в сером-> сером

Подробнее о палитрах и цветах в MUI вы можете найти здесь: https://material-ui.com/customization/color/

...