Как изменить дизайн IconButton в Material-UI?

Question

Material-ui предоставил нам кнопку со значком по умолчанию. Тем не менее, я хотел бы изменить дизайн кнопки со значком по умолчанию так: Требуется дизайн IconButton

Могу ли я узнать, как мне это изменить? Спасибо.

Answer 1

Согласно этим документам (см. Их для подробных инструкций), IconButton будет работать с любым значком , найденным здесь . Изображение, которое вы связали, больше всего похоже на menu. Пример использования:

import React, {Component} from 'react';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/icons/Menu';

class App extends Component {
  render() {
    return (
      <IconButton>
        <Menu/>
      </IconButton>
    );
  }
}

export default App;

Если вы используете create-react-app и хотите использовать пользовательский SVG, сделайте следующее:

import React, {Component} from 'react';
import IconButton from '@material-ui/core/IconButton';
import CustomMenu from './custom_menu.svg'; // root of src

class App extends Component {
  render() {
    return (
      <IconButton>
        <img src={CustomMenu}/>
      </IconButton>
    );
  }
}

export default App;