在CSS中覆盖材料设计类

Question

我正在使用React-toolbox和React-toolbox-themr依赖性来整合ReactJ中的材料设计。在使用卡组件时，我想自定义标题属性的标题和字幕的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'/>

另外，您可以尝试使用！重要的是要确保样式的更高优先级，而不是使用HTML标签：

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