材料としてのCSSフレームワークのデフォルトプロパティを変更するには

Question

私はCSSには新しく、ここで少し混乱しています。私は反応と還元と材料uiを使用しています。私は何とか特定のコンポーネントのいくつかのプロパティを編集したい。たとえば、プロパティがdisabledのTextFieldを使用するとします。私が見ることができるように、無効にされたプロパティはこれらのプロパティを含んでいます（私はテキストフィールドの中のuiノードモジュールからそれを見ました）。

var styles = { 
    root: { 
     borderTop: 'none', 
     borderLeft: 'none', 
     borderRight: 'none', 
     borderBottomStyle: 'solid', 
     borderBottomWidth: 1, 
     borderColor: borderColor, 
     bottom: 8, 
     boxSizing: 'content-box', 
     margin: 0, 
     position: 'absolute', 
     width: '100%' 
    }, 
    disabled: { 
     borderBottomStyle: 'dotted', 
     borderBottomWidth: 2, 
     borderColor: disabledTextColor 
    }, 

しかし、borderBottomLineが点滅するのが無効になっているときは、私は欲しくありません。私はそれを隠しに変更したい。どのようにフレームワークのコードに影響を与えずにそのようなアクションを行うには？

Answer 1

マテリアルUIコンポーネントのいくつかのデフォルトスタイルをオーバーライドすることができます。 docsのthisセクションを見てください。この例に注意してください：ここで

import React from 'react'; 
import {cyan500} from 'material-ui/styles/colors'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import AppBar from 'material-ui/AppBar'; 

// This replaces the textColor value on the palette 
// and then update the keys for each component that depends on it. 
// More on Colors: http://www.material-ui.com/#/customization/colors 
const muiTheme = getMuiTheme({ 
    textField: { 
    backgroundColor: 'yellow', 
    }, 
    datePicker: { 
    color: 'yellow', 
    }, 
}); 

// MuiThemeProvider takes the theme as a property and passed it down the hierarchy. 
const Main =() => (
    <MuiThemeProvider muiTheme={muiTheme}> 
    <AppBar title="My AppBar" /> 
    </MuiThemeProvider> 
); 

export default Main; 

、我々はTextFieldコンポーネントとDatePickerためcolorためbackground-colorをオーバーライドします。 getMuiTheme関数をインポートし、オーバーライドするプロパティを持つオブジェクトに渡す必要があります。残念ながら、無効にされたTextFieldの場合は、テキストの色のみを上書きできます。あなたがMuiThemeProviderコンポーネントの名を冠したプロパティ にmuiThemeを渡す必要があり、その後https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js

const muiTheme = getMuiTheme({ 
    textField: { 
    backgroundColor: 'yellow', 
    }, 
    datePicker: { 
    color: 'yellow', 
    }, 
}); 

- あなたはデフォルトのテーマの元から無効にすることができ、すべてのプロパティを確認することができます。このコンポーネントは、アプリケーションのルートコンポーネントをラップする必要があります。

const Main =() => (
    <MuiThemeProvider muiTheme={muiTheme}> 
    <AppBar title="My AppBar" /> 
    </MuiThemeProvider> 
);