覆盖卡 titleStyle 和 subtitleStyle 在 material-ui 中不起作用答案

【问题标题】：Overriding Card titleStyle and subtitleStyle not working in material-ui覆盖卡 titleStyle 和 subtitleStyle 在 material-ui 中不起作用
【发布时间】：2016-08-28 10:31:43
【问题描述】：

我必须使用 Material-ui 为 Card 组件的标题和副标题元素应用不同的样式。

以下是我的代码：

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}
    >
    .................

基本上，我正在尝试为这两个元素应用不同的字体大小。但是，输出不起作用？我必须包含任何内容吗？

【问题讨论】：

标签： reactjs react-jsx material-ui

【解决方案1】：

尝试直接在 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}    
>....

【讨论】：

【解决方案2】：

subtitleStyle 是 CardHeader 属性。请检查是否将其应用到卡头，如下所示

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

【讨论】：

【解决方案3】：

您是否考虑过我为您提供的以下编码参数，希望这有助于解决您的问题，

    <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/

【讨论】：