Стиль не отображается для карт пользовательского интерфейса материала? - PullRequest
Новая
       123

Стиль не отображается для карт пользовательского интерфейса материала?

0 голосов
/ 13 июля 2020

В настоящее время я пытаюсь переопределить классы пользовательского интерфейса материала по умолчанию, используя useStyles и используя имя класса titleSection. В настоящее время я хочу, чтобы titleSection был полужирным шрифтом Roboto, но они не применяются.

Вот моя карточка: 

function ImageCard(props: ImageCardProps) {
  const classes = useStyles();

  return (
    <Card>

      <CardHeader title={props.title} className={classes.titleSection} />
 
    </Card>
  );
}

А вот мои useStyles: 

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    
    
    titleSection:{
        paddingBottom: 0,
        fontWeight:'bolder',
        fontFamily:'Roboto',
    },
  })
);

1 Ответ

1 голос
/ 24 июля 2020

Документы MUI действительно хороши для объяснения этого: https://material-ui.com/api/card-header/

Вы можете использовать свойство 'classes' и указать заголовок css имя правила, которое охватывает компонент типографики . 

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    title: {
      paddingBottom: 0,
      fontWeight: 'bolder',
      fontFamily: 'Roboto, sans-serif',
    },
  })
);

function ImageCard(props: ImageCardProps) {
  const classes = useStyles();

  return (
    <Card>
      <CardHeader title={props.title} classes={{ title: classes.title }} />
    </Card>
  );
}

Или, если вы хотите, чтобы это было глобально, взгляните на объект темы MUI и документы переопределения темы:

...