Переопределение типа стиля Material-UI - PullRequest
Новая
       43

Переопределение типа стиля Material-UI

0 голосов
/ 16 марта 2020

Я хотел бы изменить класс MuiIconButton-root, когда я использую MuiSvgIcon с fontSizeSmall. 

import React from 'react'
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiSvgIcon: {
      fontSizeSmall: {
        padding: "5px"
      }
    }
  }
});

export default function Root(props) {
  return (
    <ThemeProvider theme={theme}>
      <MyApp />
    </ThemeProvider>
  )
}

Я изменил MuiSvgIcon, но он не может изменить MuiButtonBase-root. Есть ли способ переопределить значение отступа MuiIconButton-root, когда я использую маленький MuiSvgIcon?

Следуя рисунку:

enter image description here

1 Ответ

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

да, вы можете переопределить стиль root следующим образом, я не создаю ваш точный сценарий, но я собираюсь показать вам ту же функциональность с помощью кнопки из пользовательского интерфейса материала, сначала получите все необходимые файлы: 

npm install @material-ui/styles
npm install @material-ui/core

и затем: 

    //other react imports
import { makeStyles, withStyles } from '@material-ui/core/styles'; //you need to include this to change the style
import Button from '@material-ui/core/Button'; //this is just the button

const useStyles = theme => ({
    root: {
        '& > *': {
            margin: theme.spacing(1),
        },
    },
    button: {
        fontSize: "16px",
        fontWeight: "600",
        textAlign: "center",
        border: "none",
        cursor: "pointer",
        color: "#fff",
        backgroundColor: "#C8385E"
    }
});

class Welcome extends React.Component {
    render() {
        return (<div>
            <Button
                className={classes.button}
                variant="contained" component="span">
                BUTTON TEXT
            </Button>
        </div>);
    }
}

export default withStyles(useStyles)(Welcome);

вам нужно экспортировать класс, как показано выше, включить «withStyles» и передать стили, которые у вас есть, здесь он называется «useStyles», а затем передать имя класса. таким образом, вы можете редактировать стили в UseStyles, и они будут отображать эти изменения на экране.

...