如何将CSS样式应用于Fabric DocumentCardLogo和DocumentCardTitle组件

Question

如何将CSS样式应用于Fabric DocumentCardLogo和DocumentCardTitle组件。

我尝试了以下操作，但仍采用默认类

<Fabric.DocumentCardLogo className={'bannerdocumentcardlogo'}
                            logoIcon={iconName}
                        />
                        <Fabric.DocumentCardTitle className={"bannerdocumentcardtitle"}
                            title={description }
                            showAsSecondaryTitle={true}
                        />
.css
.bannerdocumentcardlogo {
    padding: 20px 16px 0 16px;
    color: rgba(0, 0, 0, 0.62);
    font-size: 26px;
}

.bannerdocumentcardtitle {
    position: absolute;
    height: 45px;
    left: 13px;
    right: 13px;
    bottom: 12px;
    top: 54px;
    font-family: Segoe UI;
    font-size: 12px;
    line-height: 19px;
    text-align: center;
    letter-spacing: 0.1px;
    color: rgba(0, 0, 0, 0.62);
}

我什至尝试过应用样式，即使那没用

<Fabric.DocumentCardLogo
                            styles={this.theme.getCssStyle(this.context, "bannerdocumentcardlogo") }
                            logoIcon={iconName}
                        />
                        <Fabric.DocumentCardTitle 
                            styles={this.theme.getCssStyle(this.context, "bannerdocumentcardtitle") }
                            title={description }
                            showAsSecondaryTitle={true}
                        />

styleprops 
               case "bannerdocumentcardlogo":
                    styleProps = {
                        paddingTop: "20px",
                        paddingBottom: "16px",
                        paddingLeft: "16px",
                        color: "rgba(0, 0, 0, 0.62)",
                        fontSize: "26px"
                    }
                    break;
                case "bannerdocumentcardtitle":
                    styleProps = {
                        position: "absolute",
                        height: "45px",
                        left: "13px",
                        right: "13px",
                        bottom: "12px",
                        top: "54px",
                        fontFamily: "Segoe UI",
                        fontSize: "12px",
                        lineHeight: "19px",
                        textAlign: "center",
                        letterSpacing: "0.1px",
                        color: "rgba(0, 0, 0, 0.62)"
                    }
                    break;

我知道，默认类应用于这些组件，并且不采用自定义样式。

<div class="ms-DocumentCardLogo logo_b1545987"><i data-icon-name="Movers" role="presentation" aria-hidden="true" class="root-128"></i></div>
<div class="ms-DocumentCardTitle secondaryTitle_b1545987" title="Test title</div>

预期：

<div class="ms-bannerdocumentcard logo_b1545987"><i data-icon-name="Movers" role="presentation" aria-hidden="true" class="root-128"></i></div>
<div class="ms-bannerdocumenttitle" title="Test title</div>