Переопределение титула картыStyle и subtitleStyle не работает в материале-ui

Question

Мне нужно применить различные стили для элементов заголовка и субтитров компонентов Карты, используя Material-ui.

Ниже мой код:

const mediaTitleStyles = { 
    .... 
    .... 
    title:{ 
    fontSize: 35, 
    fontWeight: 'bold', 
    }, 
    subtitle:{ 
    fontSize: 25, 
    fontWeight: 'bold', 
    }, 

}; 

<Card> 

    <CardMedia style={{background: '#9E9E9E'}} 
    overlay={<CardTitle title="LIVE THE LANGUAGE" subtitle="Learn a language based on the situations that are relevant to you." />} 
    overlayContentStyle={mediaTitleStyles.content} 
    titleStyle = {mediaTitleStyles.title} subtitleStyle={mediaTitleStyles.subtitle} 
    > 
    ................. 

В принципе, я пытаюсь применить различный размер шрифта для этих двух элементов. Но выход не работает? Должен ли я включать что-нибудь?

Answer 1

Вы рассмотрели ниже параметров кодирования я даю некоторые примеры для вас, надеюсь, что это поможет выяснить ваши вопросы,

<CardTitle expand style={{alignItems: 'flex-start', color: '#fff'}}> 
     <h4 style={{marginTop: '0'}}> 
     Featured event:<br /> 
     May 24, 2016<br /> 
     7-11pm 
     </h4> 
    </CardTitle> 

и вы также можете использовать

<CardText> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Mauris sagittis pellentesque lacus eleifend lacinia... 
    </CardText> 

здесь некоторые ресурсы, которые вы можете посмотреть на,

https://github.com/tleunen/react-mdl

и вот некоторые документы с примерами,

https://tleunen.github.io/react-mdl/components/card/

Answer 2

Попробуйте добавить стиль непосредственно в компоненте CardTitle:

.... 
<CardMedia style={{background: '#9E9E9E'}} 
overlay={ 
    <CardTitle 
     titleStyle = {mediaTitleStyles.title} 
     subtitleStyle={mediaTitleStyles.subtitle} 
     title="LIVE THE LANGUAGE" 
     subtitle="Learn a language based on the situations that are relevant to you." 
    />} 
overlayContentStyle={mediaTitleStyles.content}  
>.... 

Answer 3

subtitleStyle является собственностью CardHeader. Пожалуйста, проверьте, чтобы он был прикреплен к карточке как указано ниже

<CardHeader 
    subtitleStyle={{color:"red"}} 
    subtitle={"An Example!!"} 
    . 
    . 
/>