Closed SonuToor closed 5 years ago
SonuToor
commented
5 years ago Sorry this Issue isn't formatted correctly, I am a noob who doesn't know how to delete an issue. I'll resubmit after reading up on the protocols for submitting issues to Material UI.
HewaliGogoi
commented
5 months ago Sorry this Issue isn't formatted correctly, I am a noob who doesn't know how to delete an issue. I'll resubmit after reading up on the protocols for submitting issues to Material UI.
What's the status on this? And how did you fix this?
The site live at @ sonutoor.ca. So the contact page is where the issue is. If you navigate to the contact page (via the header) it will load correctly with the styles I want it to.
But when you refresh the page or submit the form or go directly via https://sonutoor.ca/Contact the styles are broken. The site is made using Gatsby.js and being hosted on Netlify if that is relevant.
This is the code for the Email Form
const EmailForm = () => { return ( <div key={contact-${Date.now()}`}> <Anime opacity={[0, 1]} translateY={'1em'} delay={(e, i) => i * 1000}> <form className="email-form" method="POST" style={styles.form} name="email-contact" data-netlify="true" data-netlify-honeypot="bot-field"export default EmailForm `
Below are the two text field components
`import React from 'react'; import { withStyles, makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField";
const StyledTextField = withStyles({ root: { "& label.Mui-focused": { color: "rgb(222, 124, 4)" }, "& .MuiInput-underline:after": { borderBottomColor: "rgb(145, 36, 134);" }, "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "rgb(222, 124, 4)" }, "&:hover fieldset": { borderColor: "rgb(222, 124, 4)" }, "&.Mui-focused fieldset": { borderColor: "rgb(222, 124, 4)" } } } })(TextField);
const useStyles = makeStyles(theme => ({ margin: { margin: theme.spacing(1) }, }));
export default function CustomizedInputs(props) { const classes = useStyles(); return ( <StyledTextField className={classes.margin} id="custom-css-standard-input" label={props.label} required type={props.type} name={props.name} /> )
}`
`import React from "react"; import { withStyles, makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField";
const StyledTextField = withStyles({ root: { "& label.Mui-focused": { color: "rgb(222, 124, 4)" }, "& .MuiInput-underline:after": { borderBottomColor: "rgb(145, 36, 134)" }, "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "rgb(145, 36, 134)" }, "&:hover fieldset": { borderColor: "rgb(145, 36, 134)" }, "&.Mui-focused fieldset": { borderColor: "rgb(145, 36, 134)" } } } })(TextField);
const useStyles = makeStyles(theme => ({ margin: { margin: theme.spacing(1) }, }));
export default function ContactMessage(props) { return ( <StyledTextField label="Enter your message" variant="outlined" multiline rows="8" required name={props.name} /> )
}`