重寫css中的材料設計類

我正在使用react-toolbox和react-toolbox-themr依賴關係將材料設計集成到reactjs中。在使用卡片組件時，我想自定義作爲標籤屬性的標題和副標題的CSS。我怎樣才能添加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; 
    } 
}

但是副標題不會變成粉紅色。我在這裏做錯了什麼？

來源

2017-08-29 Aayushi

'.themedCardTitle.cardTitle'是什麼語法？你想用它實現什麼，將它應用於這兩個類？ – Jayce444

我從這裏引用它https://github.com/react-toolbox/react-toolbox/issues/688 – Aayushi

分享你嘗試風格的元素和當前適用的CSS規則。 – jmargolisvt

在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;}

來源

2017-09-21 15:15:01 de3

是一個很好的做法！使用！imortant – Aayushi

在這裏你有一些情況下使用它。 https://css-tricks.com/when-using-important-is-the-right-choice/ 無論如何，你可以使用第一種風格。我認爲它應該工作，因爲CardTitle應該始終是'p' – de3

重寫css中的材料設計類

回答

相關問題