Переопределение материала Вкладка пользовательского интерфейса Индикатор эмоций в стиле - PullRequest
Новая
       42

Переопределение материала Вкладка пользовательского интерфейса Индикатор эмоций в стиле

1 голос
/ 16 марта 2019

Попытка выяснить, как переопределить стили индикатора вкладок, используя стиль из Emotion.Я не уверен, как получить доступ к вложенным классам.Это то, что у меня есть, но оно меня туда не доставляет: 

const StyledTabs = styled(Tabs)(
  {
    classes: {
      indicator: {
        background: 'black',
      },
    },
  }
);

Любая помощь будет потрясающей!

1 Ответ

1 голос
/ 16 марта 2019

Есть пара вопросов.styled из Emotion поддерживает создание только одного имени класса для каждого использования.Он не обеспечивает никакой поддержки структуры classes: {indicator: {styles}} в вашем примере.

Ниже приведен синтаксис, позволяющий использовать styled для предоставления имени класса для класса-индикатора Tabs: 

const StyledTabs = styled(({ className, ...other }) => {
  return <Tabs {...other} classes={{ indicator: className }} />;
})({
  backgroundColor: "black"
});

Однако это не работает полностью надежно, потому что элемент <style> для стилей Emotion не всегда появляется после элементов <style> из JSS (используется для стилевого оформления Material-UI) в<head> документа.Я не уверен, как изменить точку вставки для стилей Emotion, но вы можете прочитать здесь о том, как изменить точку вставки для JSS.Я включил этот подход в свою песочницу ниже.

Вот песочница, которая показывает эту работу:

Edit Tabs indicator emotion

Другой вариант синтаксиса:следующее, что позволит вам контролировать более одного класса вкладок: 

const StyledTabs = styled(({ className, ...other }) => {
  return <Tabs {...other} classes={{ root: className, flexContainer: "flexContainer", indicator: "indicator" }} />;
})({
  "& .indicator": {
    background: "black"
  },
  "& .flexContainer": {
    flexDirection: "row-reverse"
  }
});

Edit Tabs indicator emotion

...