CSSの材料デザインクラスをオーバーライド

Question

私はreact-toolboxとreact-toolbox-themr依存関係を使用して反応デザインに材料デザインを統合しています。カードコンポーネントを使用している間、タグの属性であるタイトルとサブタイトルのCSSをカスタマイズしたいと思います。サブタイトルやタイトルにCSSを追加するにはどうしたらいいですか？

私のコンポーネントは次のようになっています。 App.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> 
     ) 
} 

}

私はこのような何かを持っています。

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

ただし、字幕はピンク色に変わりません。私はここで間違って何をしていますか？

Answer 1

App.cssには、優先度の高いクラスを追加します。例：

p.card-subtitle{ color:pink; } 

CartTitleコンポーネントのhtmlタグであるため、「p」を使用しています。

その後、あなたは（あなたがスタイルローダーを持って） 'themes.css' をインポートするだけのようstyesをインポートします。

import './App.css' 

最後に、あなたのコンポーネントにクラスを参照：

また

<CardTitle className='card-subtitle'/> 

をhtmlタグを使用する代わりに、スタイルの優先順位を高くすることが重要です。

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