import React, { Component } from 'react';
import './App.css';
import Screen from './components/Screen/Screen';
import Button from './components/Button/Button';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import pink from '@material-ui/core/colors/pink';
const buttonTheme = createMuiTheme({
palette: {
primary: {
main: '#2dff46',
},
secondary: pink,
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider theme={buttonTheme}>
<Screen>
<div>Hello</div>
<Button variant='contained' color='primary'>
GO
</Button>
</Screen>
</MuiThemeProvider>
);
}
}
export default App;
我只是想创建一个带有一些自定义颜色(主题)的按钮。它可以在没有“theme={buttonTheme}”的情况下工作,但当然它使用默认值。我收到以下错误:
TypeError: Cannot read property 'borderRadius' of undefined
styles
node_modules/@material-ui/core/Button/Button.js:41
38 | minWidth: 64,
39 | minHeight: 36,
40 | padding: '8px 16px',
> 41 | borderRadius: theme.shape.borderRadius,
42 | color: theme.palette.text.primary,
43 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
44 | duration: theme.transitions.duration.short
thanks!!
正如之前的评论中提到的,导入声明不正确。
这:
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
应该是这样的:
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)