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'一样导入styes（如果你有样式加载器）：

import './App.css'

最后，引用组件中的类：

<CardTitle className='card-subtitle'/>

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

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

覆盖css中的材质设计类

1 个答案: