기본 색상이 AppBar 내부 구성 요소의 팔레트와 일치하지 않습니다.

Question

ReactJS 웹 응용 프로그램의 경우 material-ui-next (브랜치 next aka v1)을 사용하기 시작했습니다. AppBar 내부에 배치 된 Typography 구성 요소의 기본 색상과 예상 색상을 설정하는 데 어려움이 있음을 발견했습니다.

여기에 material palette을 정의했으며 기본 색상으로 남색을 선택하여 볼 수 있듯이 텍스트 기본 색상이 흰색 (#ffffff)으로 자동 설정됩니다. 이것은 또한 material documentation 공식에서 인디고 팔레트를보고 확인됩니다.

그러나 기본 색상은 검은 색으로 밝혀졌습니다. color 속성을 default으로 설정하면 검정색으로 유지되고, 작동하게 만드는 유일한 방법은 inherit으로 설정하는 것입니다.

왜해야합니까? 내가 놓친 게 있니?

also seen that은 테마로 하나의 text 속성을 사용자 정의 할 수 있습니다. 올바른 소식인가요? 그리고 예인 경우, 예를 들어 text.primary를 어떻게 사용할 수 있습니까? docs states 이후 Typography는 값 default|accent|error|primary|secondary|inherit으로 만 사용할 수 있습니까?

동일한 문제가 IconButton에서도 발생합니다.

아래에서 내 코드를 찾을 수 있습니다. 생성자에서 팔레트 사용자 지정 값을 설정 한 다음 render()에서 테마를 MuiThemeProvider으로 전달합니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './material/App'; 

ReactDOM.render(<App />, document.getElementById('root')); 

가 사전에 감사합니다

import React from 'react'; 
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; 
import { indigo, lightBlue, red } from 'material-ui/colors'; 
import AppBar from 'material-ui/AppBar/AppBar'; 
import Toolbar from 'material-ui/Toolbar/Toolbar'; 
import Typography from 'material-ui/Typography/Typography'; 
import IconButton from 'material-ui/IconButton'; 
import DeleteIcon from 'material-ui-icons/Delete'; 

class App extends React.Component { 
    constructor() { 
    super(); 

    const options = { 
     palette: { 
     primary: indigo, 
     secondary: lightBlue, 
     error: red, 
     }, 
    }; 

    this.theme = createMuiTheme(options); 
    } 

    render() { 
    return (
     <MuiThemeProvider theme={this.theme}> 
     <AppBar> 
      <Toolbar> 
      <Typography color="inherit"> 
       My App 
      </Typography> 
      <IconButton color="inherit" aria-label="Menu"> 
       <DeleteIcon /> 
      </IconButton> 
      </Toolbar> 
     </AppBar> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default App; 

이 내 index.js 파일입니다.

Answer 1

사용

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 


const muiTheme = getMuiTheme({ 
    palette: { 
    primary1Color: "#000000", //primary 
    accent1Color: "#741b1d", //seconday 
    } 
}); 

또한

<MuiThemeProvider muiTheme={muiTheme}> 

palette: { 
    primary1Color: Colors.cyan500, 
    primary2Color: Colors.cyan700, 
    primary3Color: Colors.lightBlack, 
    accent1Color: Colors.pinkA200, 
    accent2Color: Colors.grey100, 
    accent3Color: Colors.grey500, 
    textColor: Colors.deepPurpleA700, 
    alternateTextColor: Colors.white, 
    canvasColor: Colors.white, 
    borderColor: Colors.grey300, 
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), 
    pickerHeaderColor: Colors.cyan500, 
    } 

Answer 2

그것은 그러나, 이것은이 있어야하는데 어떻게, 비트 곡해지만 : 테마가에있다 가능한 한 완벽하게 귀하의 모든 요구를 충족시켜야합니다. 기본 및 보조 색상 만 정의하면 충분하지 않으며 구성 JSON 객체가 제공하는 모든 가능성을 활용해야합니다. 그렇지 않으면 기본값을 사용하게됩니다.

좀 더 자세히 살펴보면 입력기 구성 요소 (내가했던 타이포그래피 문제와 동일한 방식으로 작동하지만이 예제는 더 완벽 함)가 흰색 텍스트와 흰색 밑줄로 표시되어 랩핑 테마를 만들 수 있다고 가정합니다 이처럼 사용 후

const options = { 
    palette: { 
    text: { 
     primary: grey[50], 
    }, 
    input: { 
     bottomLine: grey[50], 
     inputText: grey[50], 
    } 
    }, 
}; 

을 그리고 : : 또는

<MuiThemeProvider theme={createMuiTheme(options)}> 
    <Input 
     label="File name" 
     placeholder="Untitled-1" 
     required 
    /> 
    </MuiThemeProvider> 

또는를하는 스타일은 공식 문서의 API 섹션에서 사용할 수있는 각 구성 요소 스타일의 구조를 (이용 오브젝트 정의이 옵션을 전달하여 그 입력 구성 요소는 개체), 사용 withStyles() 구성 요소와 같습니다.

const styles = { 
    root: { 
     color: 'white', 
    }, 
    underline: { 
     '&:before': { 
     backgroundColor: 'white', 
     }, 
     '&:hover:not($disabled):before': { 
     backgroundColor: 'white', 
     height: 2, 
     }, 
    }, 
    }; 

그리고 이런 스타일 설정 :

<Input 
    classes={{ 
     root: classes.root, 
     underline: classes.underline, 
    }} 
    label="File name" 
    placeholder="Untitled-1" 
    required 
    /> 

가 withStyles로 수출하는 것을 잊지 마십시오() 구성 요소를.

export default withStyles(styles)(FileName); 

아마도 가장 빠른 방법 일 수 있습니다.