ReactJS 웹 응용 프로그램의 경우 material-ui-next (브랜치 next aka v1)을 사용하기 시작했습니다. AppBar 내부에 배치 된 Typography 구성 요소의 기본 색상과 예상 색상을 설정하는 데 어려움이 있음을 발견했습니다.기본 색상이 AppBar 내부 구성 요소의 팔레트와 일치하지 않습니다.
여기에 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
파일입니다.
이 응답은 v0.X에만 유효하며, 이는 내가 요구하는 것이 아닙니다. – LucioB