Переопределение материала - стиль пользовательского интерфейса не работает

Question

Я новичок в пользовательском интерфейсе материала. Здесь я пытаюсь переопределить CSS материала UI tabs component.

<Tab
    key={`${tab}_${index}`}
    classes={{
    flexcontainer: css.tabFlexContainer
    }}
    disableRipple
    label={tab.label}
    value={tab.value}
    icon={
    tab.icon ? <Icons className={css.tabIcons} iconname={tab.icon} /> : null
    }
/>

Итак, здесь я пытаюсь переопределить класс flexContainer с помощью этого CSS:

. tabFlexContainer {
   width : 100%
  justify -content :space-between
}

Итак, когда я использую, я получаю только ошибку времени компиляции,

TS2769: Никакая перегрузка не соответствует этому вызову.

Может кто-нибудь помочь мне с это?

Answer 1

Прежде всего, если вы проверите структуру DOM

<div class="MuiTabs-root Tabs" aria-label="disabled tabs example">
  <div class="MuiTabs-scroller MuiTabs-fixed" style="overflow: hidden;">
    <div class="MuiTabs-flexContainer" role="tablist">
    </div>
  </div>
</div>;

Вы обнаружите, что класс_имя спроса равен MuiTabs-flexContainer (вместо tabFlexContainer)

Пример: для вкладок все имя класса можно найти в вкладках MUI CSS API

---

Существует множество решений, кроме обычных withStyles и makeStyles, для полного переопределения:

1.Материал-решение для пользовательского интерфейса

1.1 Используйте внутренний стиль MUI HO C withStyles для полного переопределения составная часть.

Использование вложенного селектора

import { Tabs, Tab, withStyles } from "@material-ui/core";

const StyledTabs = withStyles({
  root: {
    background: "light-blue",
    ...
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    "& div.MuiTabs-scroller": {
      "& .MuiTabs-flexContainer": {
        background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
      }
    }
  }
})(Tabs);

---

1.2 Использование обычного createStyles или makeStyles решение стиля

Классический компонент
withStyles (функция высокого порядка) + createStyles

Функциональный компонент
useStyles (hooks) + makeStyles

См. Подробности: { ссылка }

---

2.Решение со стилевыми компонентами

Если вы хотите использовать отдельные CSS файлы для стиля MUI component

Вы можете попробовать styled-components

styled-components позволяет вам написать актуальный CSS код для стилизации ваших компонентов.

Использование:

import styled from 'styled-components';
import { Tabs, Tab, withStyles } from "@material-ui/core";

const StyledTabs = styled.Tabs`
  font-size: 1.5em;
  ...
`;

---

3.Separate Pure CSS решение

См .: css_selectors

import "./styles.css";

div.MuiTabs-flexContainer {
  background: linear-gradient(45deg, red 30%, #ff8e53 90%);
}

Answer 2

Вы можете использовать API (реквизиты), предоставленные для tabs с помощью Material-UI здесь . например:

import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles(theme => ({
    tabRoot: {
       // ...
    },
    flexContainer: {
        width : 100%
        justifyContent :"space-between"
    }

}));

export default useStyles;

Использование в вашем компоненте:

const classes = useStyles();
// ...

<Tabs
    classes={{ flexContainer: classes.flexContainer }} // override for tabs
   ...
>
    <Tab classes={{ root: classes.tabRoot}}  /> // override for tab
</Tabs>

См. CSS раздел этих ссылок. ( Tab , Tabs )

Или вы можете использовать className prop для добавления css класса и переопределения стилей.

Примечание: Это css в js, тогда стиль должен быть объектом (свойство camelCase), а не css.

Answer 3

Очень трудно переопределить пользовательский интерфейс материала, используя CSS, но вы можете использовать Styled-Components или makeStyle Hook.