0

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

这是Material-UI我要定位的表单和类（表单的第一个文本输入字段的before标签）：

在此处输入图像描述

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

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库类。

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

4

2 回答 2

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

和

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

每个组件的API 文档将让您知道如何定位特定的 DOM 元素

于 2020-06-25T20:05:45.903 回答
0

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

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

在上面的示例中，我们更改了全局类的 css，您可以看到我们如何从元素中创建类overrides，这样所有按钮都将设置为. 您可以在组件的组件 API 页面中看到元素类。这里有一个例子rootMuiButtonfontSize1rem

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

于 2020-06-25T22:31:48.713 回答