mui button only uppercase

MUI button은 자동 대문자화가 된다.

text-transform : "none",을 써서 해결하려했다. 

javascript에서는 오류가 없었지만 typescript를 쓰니 오류가났다.

 

 

const ButtonStyle= {
padding: paddingStyle,
width: widthStyle,
backgroundColor: backgroundColor || `var(--main-background)`,
textTransform: "none", //오류발생
color : color,
};
return (
<Button
disabled={disabled && disabled}
variant={variants ? "text" : "contained"}
href={link && link}
type="submit"
style={ButtonStyle} //오류발생
onClick={onClick}
startIcon={icon}
>
{title}
</Button>
);

const ButtonStyle: React.CSSProperties = {
    padding: paddingStyle,
    width: widthStyle,
    backgroundColor: buttonColor || `var(--main-background)`,
    textTransform: "none", 
    color : color,
  };
  return (
    <Button
      disabled={disabled && disabled}
      variant={variants ? "text" : "contained"}
      href={link && link}
      type="submit"
      style={ButtonStyle}
      onClick={onClick}
      startIcon={icon}
    >
      {title}
    </Button>
  );

타입을 명시적으로 지정해줬더니 해결됐다.

 

++ css root로 설정한 부분을 가져오려고 backgroundColor : `var(--main-background)` 로 설정했다. 문자열로 지정하는 것이 포인트이다.