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';
关于javascript - 使用MUI按钮时: TypeError: Cannot read property 'borderRadius' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52508383/