property button basic does not exist on type 'string

New on react typescript, i'm converting my code into typescript, other 'props' works but one of them gives this error: Property 'button_basic' does not exist on type 'string | number'. Property 'button_basic' does not exist on type 'string'.ts(2339)

i'm using those other props the same way and not getting error from those, but why here ? what am i doing wrong ?

interface ConnectedBrokerFormProps {
  onSubmit: string;
  key: string;
  readOnly: boolean;
  mode: string;
  classes: string | number;
}

const BrokerForm: React.FC<ConnectedBrokerFormProps> = (props) => {

  <Button
            type="submit"
            variant="contained"
            color="primary"
            disabled={
              !currentSite ||
              Object.values(state.error).some((v) => {
                return v === true;
              })
            }
            className={props.classes.button_basic}
            startIcon={<Done />}
          >
            <Trans i18nKey="form.save">Save</Trans>
          </Button>
          
          };

that classes comes as props from other component like this :

  const useStyles = makeStyles((theme) => ({
 button_basic: {
      padding: theme.spacing(1),
      textAlign: "center",
      color: theme.palette.text.primary,
    },
  }));
  const classes = useStyles();

CodePudding user response：

According to your examples, classes should be an object with button_basic property.

Also, I suppose button_basic should be of type string since from my understating makeStyles generates a className:

interface ConnectedBrokerFormProps {
  onSubmit: string;
  key: string;
  readOnly: boolean;
  mode: string;
  classes: {
    button_basic: string,
  };
}