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
谢谢！！
正如前面的评论中提到的，导入语句是不正确的。这：
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
应该是这样的：
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句