2016-03-31 2 views
1

Я использую материал-интерфейс и пытаюсь стилизовать цвет фона в RaisedButton, используя один из реквизита называется backgroundColor:Может не стиль материал-интерфейс со своим реквизитом

import React, {Component} from 'react'; 
import RaisedButton from 'material-ui/lib/raised-button'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Home.scss'; 

class Home extends Component { 
    render() { 
     return (
      <div> 
       <h1 className={s.h1}>Pomodoro Tech</h1> 
       <div className={s.imgContain}> 
        <img src={require('./pom.png')} width="100%" height="100%"/> 
       </div> 
       <div> 
        <RaisedButton 
         label="Login" 
         secondary={true} 
         backgroundColor="#77CA2D" 
        /> 
        <RaisedButton 
         backgroundColor="#77CA2D" 
         label="About" 
        /> 
       </div> 
      </div> 
     ); 
    } 
} 

export default withStyles(Home, s); 

Но это свойство никогда не делает различий.

версия материала-ui я использую 0.15.0-alpha.1, в соответствии с результатом команды npm list --depth=0.

Прежде чем задать этот вопрос, у меня есть done some search, но не могу понять, в чем проблема.

+0

Мое лучшее предположение, что это вызвано вашим CSS, потому что, когда я вставляю то, что вы показываете за минусом стилей, он отличает мою спецификацию backgroundColor. Другая возможность заключается в том, что это ошибка в 15.x. Я использую 14.x. –

+0

какая версия материала-ui вы используете? – FranBran

+0

@LarryMaccherone в соответствии с ответом в ссылке, которую я положил в свой вопрос, я заменил '' RaisedButton'' на '' FlatButton'', а реквизиты '' backgroundColor'' отлично работали. Однако, когда я пробовал css решение в этом ответе, оно потерпело неудачу, и мой «RaisedButton» остался без изменений. – Halt

ответ

0

Это работает для меня, использовали материал-интерфейс v0.14.4, может быть это было нарушение в 0.15.0-alpha.1

Пожалуйста, вставьте рабочий пример на JSBin или где-то отладить его дальше.

0

Удостоверьтесь, что вы не указали primary={true}; в противном случае он будет игнорировать ваш backgroundColor. См. Мой ниже:

<RaisedButton 
    label={stepIndex === 2 ? 'Finish' : 'Next'} 
    disableTouchRipple={true} 
    disableFocusRipple={true} 
    onClick={this.handleNext} 
    backgroundColor={teal400} 
/> 
Смежные вопросы