Material-UI：使用 makeStyles 和 CSS-In-JS 来定位库元素样式答案

【问题标题】：Material-UI: Using makeStyles and CSS-In-JS to target library elements stylesMaterial-UI：使用 makeStyles 和 CSS-In-JS 来定位库元素样式
【发布时间】：2020-10-16 05:31:39
【问题描述】：

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

这是我试图定位的表单和 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 并自定义样式？

【问题讨论】：

标签： css reactjs material-ui react-hooks css-in-js

【解决方案1】：

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

和

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

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

【讨论】：

【解决方案2】：

你可以像@hotpink 所说的那样做，但是这样你只会改变这个组件中元素的样式（here 了解更多细节），但是如果你愿意，还有更好的方法来做到这一点这些更改将应用于项目中的所有元素：

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

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

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

【讨论】：