Material-UI:使用makeStyles和CSS-In-JS对象库元素样式

Question

我正在使用Material-UI并使用makeStyles和CSS-In-JS构建一个表单来进行样式设置。我有一个来自Material-UI库的表单，我正在尝试设置它的样式。我正在尝试弄清楚如何针对来自库的form元素的类并覆盖样式。

下面是我尝试针对的表单和Material-UI类(表单的第一个文本输入字段的before标记)：

​

​

我想要更改文本字段的border-bottom属性。这是我尝试过的。看看CSS中的underline类和表单的第一个文本输入：

const useStyles = makeStyles((theme) => ({
    root: {
      display: 'flex',
      width: '100%',
      display: 'flex',
      alignItems: 'center'
    },
    container: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh'
    },
    paper: {
        padding: theme.spacing(2),
        display: 'flex',
        justifyContent: 'center',
        color: 'snow',
        background: 'salmon'
    },
    form: {
        background: 'salmon',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
        height: '50vh',
        width: '50%'
    },
    customInput: {
        background: 'black'
    },
    underline: {
        '&:before': { 
            borderBottom: '10px solid green'
        },
      },
  }));
  
  export default function FormOne() {
    const classes = useStyles();

    return (
    <Grid container className={classes.container}>
        <Grid item xs={12} md={6}>
            <Paper elevation="5" className={classes.paper}>
                <Formik
                    initialValues={{
                    email: '',
                    password: '',
                    }}

                    validate={values => {
                        const errors = {};
                        if (!values.email) {
                            errors.email = 'Required';
                        } else if (
                            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
                        ) {
                            errors.email = 'Invalid email address';
                        }
                        return errors;
                    }}

                    onSubmit={(values, { setSubmitting }) => {
                    setTimeout(() => {
                        setSubmitting(false);
                        alert(JSON.stringify(values, null, 2));
                    }, 500);
                    }}
                >
                    {({ submitForm, isSubmitting }) => (
                        <Form className={classes.form}>
                            <Field
                                component={TextField}
                                name="email"
                                type="email"
                                label="Email"
                                fullWidth="true"
                                variant="filled"
                                size="small"
                                color="primary"
                                className={classes.underline}
                            />
                            <br />
                            <Field
                                component={TextField}
                                type="password"
                                label="Password"
                                name="password"
                                fullWidth="true"
                                variant="filled"
                                size="small"
                                color="secondary"
                            />
                            <br />
                            <Field
                                component={TextField}
                                type="password"
                                label="Password"
                                name="password"
                                fullWidth="true"
                                variant="filled"
                                size="small"
                                color="primary"
                            />

                            {isSubmitting && <LinearProgress />}
                            <br />

                            <Button
                                variant="contained"
                                color="primary"
                                disabled={isSubmitting}
                                onClick={submitForm}
                                className={classes.button}
                                >
                                Submit
                            </Button>
                        </Form>
                    )}
                </Formik>
            </Paper>
        </Grid>
    </Grid>
    );
  }

通常，当我使用这种方法设置样式时，如果在函数中包含const classes = useStyles();，则可以在元素上使用className={classes.nameOfClass}，然后在makeStyles中以该元素为目标，这样就可以设置元素的样式。这对于我正在设计样式的自定义元素非常有效，但不适用于覆盖Material-UI库类。

如何在makeStyles中定位.MuiFilledInput-underline:before并自定义样式？

Answer 1

<Field classes={{ underline: classes.underline }} />

和

underline: {
  '&:before': {
    borderBottom: '10px solid green',
  },
},

每个组件的API docs都会让您知道如何针对特定的DOM元素

Answer 2

你可以像@hotpink told那样做，但是这样你只需要改变这个组件中元素的样式(更多细节用here)，但是如果你想把这些改变应用到你的项目中的所有元素上，还有一种更好的方法：

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        fontSize: '1rem',
      },
    },
  },
});

在上面的示例中，我们更改了全局类的css，您可以看到如何从MuiButton元素overrides root类，这样所有按钮的fontSize都将设置为1rem。您可以在组件的组件API页面中看到元素类。这里是一个example

您可以查看包含大量教程的完整文档，我建议您阅读如何使用here ThemeProvider here