React Material UI TextField 样式不工作

Question

我正在尝试设置由 Material UI（找到 here）提供的 TextField API 的样式，但是，由于某种原因，样式没有被应用于组件。当我在网页上呈现它时，它以默认形式显示。我将不胜感激任何帮助。这是我的代码。

interface CustomEmptyFieldProps {
usernameOrPass: string,
}

const baseMuiOutlineInputSizeAndPosition = {
borderRadius: 8,
width: '328px',
height: '40px',
};

const baseTextFieldSizeAndPosition = () => (
{
    "& label:not(.Mui-focused)": { // Label in center of TextInput
        marginTop: '-8px',
    },
    "& label:.Mui-shrink": { // Label in center of TextInput
        marginTop:'-8px',
    },
    width: '328px',
    height: '40px'
}
);

const useTextFieldStyles = (isTypedIn: boolean) => (
makeStyles({
        "& label.Mui-focused, label:not(.Mui-focused)": { color: TextFieldColours.error.label },
        "& .MuiOutlinedInput-root": {
            "& fieldset": { borderColor: TextFieldColours.error.border, },
            "&:hover fieldset": { borderColor: TextFieldColours.error.border, },
            "&.Mui-focused fieldset": { borderColor: TextFieldColours.error.border },
            ...baseMuiOutlineInputSizeAndPosition,
        },
        ...baseTextFieldSizeAndPosition, 
})
);



const EmptyTextField = (props: CustomEmptyFieldProps) => {
const {
    usernameOrPass,
} = props; 
const inputLabel = "VolunteerHub " + usernameOrPass; 
const errorMessage = "Please enter your VolunteerHub " + usernameOrPass; 

const textFieldStyles = useTextFieldStyles(false);
return (
    <div>
        <TextField
            classes={{ root: textFieldStyles, }}
            placeholder={inputLabel}
            id="outlined-error-helper-text"
            defaultValue=""
            helperText={errorMessage}
            variant="outlined"

        />
    </div >
);
}

Answer 1

不确定您声明 useTextFieldStyles 的方式。这是我通常的做法：

const useTextFieldStyles = makeStyles(() => ({
  root: {
    "& label.Mui-focused, label:not(.Mui-focused)": {
      color: TextFieldColours.error.label
    },
    "& .MuiOutlinedInput-root": {
      "& fieldset": { borderColor: TextFieldColours.error.border },
      "&:hover fieldset": { borderColor: TextFieldColours.error.border },
      "&.Mui-focused fieldset": {
        borderColor: TextFieldColours.error.border
      },
      ...baseMuiOutlineInputSizeAndPosition
    },
    ...baseTextFieldSizeAndPosition
  }
}));

工作样本：https://codesandbox.io/s/runtime-sky-x14vr?file=/src/App.tsx:647-1173

React Material UI TextField 样式不工作

React Material UI TextField Styles Not Working

styling

uitextfield

reactjs

material-ui