重写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中的材料设计类

回答

相关问题