Блог

Главная - Вопросы по программированию - Как изменить пользовательский цвет значка SVG, чтобы он был совместим с поставщиком тем в Materiel-UI?

Как изменить пользовательский цвет значка SVG, чтобы он был совместим с поставщиком тем в Materiel-UI?

#javascript #reactjs #material-ui

Вопрос:

У меня есть 2 значка , один из которых является классическим значком , импортированным из Mui, другой-пользовательский логотип.svg , проблема в том, что я хочу, чтобы эти 2 значка были совместимы с переключателем тем с помощью поставщика тем, если тема темная, то значки должны менять цвет с темного на белый. Мне удалось сделать это с импортированным значком, добавив цвет= «основной», но проблема в упрямом пользовательском svg, у кого-нибудь была эта проблема ?

 const useStyles = makeStyles((theme) => ({
  icon: {
    fontSize: 35,
    //color: 'grey',
    'amp;:hover': {
      //color: 'white',
      backgroundColor: 'transparent',
    },
  },
}));

const iconStyle = {
  padding: 2,
  marginTop: 0,
  marginBottom: 0,
  //backgroundColor: '#ef6c00',
  borderRadius: '50%',
  //fill: '#222222',
  //fill: 'grey',
  'amp;:hover': {
    color: 'white',
  },
};

 // Custom svg icon
 <Logo style={iconStyle} width='60' height='60' />
 // Mui icon compatible with theme provider. 
 <EmojiObjectsIcon color='primary' className={classes.icon} onClick={switchTheme} />

Пример Codesandbox

Комментарии:

1. Код не работает. Нет ясности в деталях

2. это фрагмент из приложения react.., тогда я сделаю кодовое поле..

Ответ №1:

Для достижения этой цели есть два шага.

Во-первых, найдите способ передать цвет svg значку.

Во-вторых, используйте pirmary цвет и theming параметры значка.

Первый

Путем создания Logo компонента и использования svg на нем:

 const Logo = ({ fill, width, height }) => (
  <svg
    fill={fill}   // ---> here
    width={width}  // ---> here
    height={height}  // ---> here
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M17.707 8.293a1 1 0 0 1 0 1.414L15.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L14 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L12.586 12l-2.293-2.293a1 1 0 1 1 1.414-1.414L14 10.586l2.293-2.293a1 1 0 0 1 1.414 0z"
      fill={fill}  // ---> here
    />
    <path
      clipRule="evenodd"
      d="M22 5a1 1 0 0 0-1-1H9.46a2 2 0 0 0-1.519.698l-5.142 6a2 2 0 0 0 0 2.604l5.142 6A2 2 0 0 0 9.46 20H21a1 1 0 0 0 1-1V5zm-2 13H9.46l-5.143-6L9.46 6H20v12z"
      fill={fill}  // ---> here
    />
  </svg>
);

export default Logo;

Это похоже на другие ваши компоненты, fill ему передаются и другие реквизиты.

Теперь у нас есть Logo компонент (с расширением .jsx), такой же, как и другие компоненты, с некоторыми реквизитами.

Второй

Теперь пришло время добавить Logo значок AppBar и передать соответствующие цветовые реквизиты:

 <Logo
  fill={
    theme
      ? darkTheme.palette.primary.light
      : darkTheme.palette.primary.dark
  }
  width="16"
  height="16"
/>

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

Рабочая версия на CodeSandbox.

Метки: ,