覆盖 CSS 中的材料设计类

Question

我正在使用 react-toolbox 和 react-toolbox-themr 依赖项将材料设计集成到 reactjs 中。在使用卡片组件时，我想自定义标题和副标题的 CSS，它们是标签的属性。如何将 css 添加到卡片的副标题和标题？

我的组件看起来像这样。

import React, { Component } from 'react';
import {Display} from './Display.js';
import './toolbox/theme.css';
import theme from './toolbox/theme'
import ThemeProvider from 'react-toolbox/lib/ThemeProvider'
import Button from 'react-toolbox/lib/button/Button.js';
import IconButton from 'react-toolbox/lib/button/IconButton.js';
import Avatar from 'react-toolbox/lib/avatar/Avatar.js';
import Card from 'react-toolbox/lib/card/Card.js';
import CardTitle from 'react-toolbox/lib/card/CardTitle.js';
import CardText from 'react-toolbox/lib/card/CardText.js';
import {Constants} from './constants.js';
import axios from 'axios';
import moment from 'moment';
const test = require('./App.css')

export class QueryList extends React.Component{
constructor(props) {
    super(props);
    this.dummyText = "ABCDEFGHIJKLMNOP"
    this.state = {
        querylist: []
    };
}

 componentDidMount(){
    this.loadData();
}

  loadData(){
      var me=this;
        axios({
          method:Constants.methods[0],
          url:Constants.URLConst+"/Query?pageNum=1&totalperPage=15&userid=0",
          headers: Constants.headers

        }).then(function(response){
              me.setState({
                  querylist: response.data.QueryListDetails.QueryData
              })
        }).catch(function(error){
          console.log(error);
        })
  }

render(){

    var i=1;
    var listQueries = this.state.querylist.map(function(item) {
        item.QueryPostedDate = "Posted On "+moment(item.QueryPostedDate).format('DD/MM/YYYY HH:mm:Ss A');
      return (
            <Card className="query-card" key={i++}>
                <CardTitle
                  className={test.themedCardTitle}
                  title={item.QueryText}
                  subtitle={item.QueryPostedDate}
                  theme={test}
                />
            </Card>
      );
    });

    return(
        <ThemeProvider theme={theme}>
        <div>
            <Display/>
            {listQueries}
        </div>
        </ThemeProvider>
        )
}

}

在 App.css 我有这样的东西。

.themedCardTitle.cardTitle {
  .subtitle {
    color: pink;
  }
} 

但字幕没有变成粉红色。我在这里做错了什么？

Answer 1

在 App.css 中，添加一个具有更高优先级的类。例如：

p.card-subtitle{ color:pink; }

请注意，我使用的是“p”，因为那是 CartTitle 组件的 html 标记。

然后像导入'themes.css'一样导入样式（前提是你有样式加载器）：

import './App.css'

最后，引用组件中的类：

<CardTitle className='card-subtitle'/>

或者，您可以尝试使用 !important 来确保样式的优先级更高，而不是使用 html 标签：

.card-subtitle{ color:pink !important;}