Как изменить цвет индикатора вкладки с ошибкой проверки? - PullRequest
3 голосов
/ 30 марта 2020

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

Вот мои стили,

const useTabsClasses = makeStyles(theme => ({
  root: {
    color: theme.palette.common.accent,
    height: '2rem',
  },
  indicator: {
    backgroundColor: theme.palette.common.accent,
  },
  indicatorColor: {
    backgroundColor: theme.palette.common.accent,
  },
}));

const useTabClassesErrorStyles = makeStyles({
  wrapper: {
    color: 'red',
  },
});

const tabsClasses = useTabsClasses();
const tabClassesError = useTabClassesErrorStyles();

А вот мои вкладки,

<Tabs
  value={tabValue}
  onChange={(event, newValue) => setTabValue(newValue)}
  classes={tabsClasses}
>
  <Tab label="Description" classes={!tabValidate['description'] ? tabClassesError : {}} />
  <Tab label="Cover" classes={!tabValidate['Tab2'] ? tabClassesError : {}} />
</Tabs>

При отсутствии ошибок цвет текста и цвет индикатора синий. Поскольку код прямо сейчас, мне удалось заставить цвет текста неверной вкладки стать красным, когда эта вкладка имеет ошибку:

img1

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

Согласно документам , есть свойство с именем indicator, которое можно переопределить, но это изменит стиль индикатора для всех вкладок.

Песочница пример изменения стилей индикатора вкладки для ВСЕХ вкладок. Однако я хочу изменить стиль индикатора только для вкладок SPECIFI C, но не для всех.


Редактировать

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

Я добавил TabIndicatorProps к компоненту <Tabs ... /> и динамически определил цвет, потому что несколько вкладок могли иметь ошибки проверки:

const theme = useTheme(); // hook for material ui

const getTabIndicatorStyle = () => {
  const tabIndicatorColor = theme.palette.error.main;
  switch (tabValue) {
    case 0:
      if (!tabValidate['description']) return tabIndicatorColor;
      break;
    case 1:
      if (!tabValidate['cover']) return tabIndicatorColor;
      break;
    default:
      return '';
  }
};

<Tabs
  value={tabValue}
  onChange={(event, newValue) => setTabValue(newValue)}
  classes={tabsClasses}
  TabIndicatorProps={{
    style: {
      backgroundColor: getTabIndicatorStyle(),
    },
  }}
>
  <Tab label="Description" classes={!tabValidate['description'] ? tabClassesError : {}} />
  <Tab label="Cover" classes={!tabValidate['Tab2'] ? tabClassesError : {}} />
</Tabs>

img2

1 Ответ

1 голос
/ 30 марта 2020

Написать список makeStyles будет хорошо

classes={{ indicator: indicatorList[selected]().indicator }}

enter image description here

Если тема нужна, используйте useTheme и передайте его так, как сработают параметры.

Вы также можете создать постоянный список цветов внутри компонента с темой, который будет таким же.


Полный код:

const indicatorList = ["red", "green", "blue", "black"].map(x =>
  makeStyles(theme => ({
    indicator: {
      // backgroundColor: theme.palette.common.accent
      backgroundColor: x
    }
  }))
);

export default function App() {
  const [selected, setSelected] = useState(0);
  const setTabValue = idx => {
    setSelected(idx);
  };
  return (
    <div className="App">
      <Tabs
        value={selected}
        onChange={(e, idx) => setTabValue(idx)}
        classes={{ indicator: indicatorList[selected]().indicator }}
      >
        <Tab label="Description" />
        <Tab label="Cover" />
        <Tab label="Cover" />
        <Tab label="Cover" />
      </Tabs>
    </div>
  );
}

Edit trusting-swirles-42hnl

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...