我将 CRA 与 Material-ui 和 Styled Components 类型的样式一起使用。
在构建 CSS 时,我想访问 Material-ui 的默认主题。
package.json 的一部分:
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"@material-ui/core": "^4.2.1",
"@material-ui/icons": "^4.2.1",
"@material-ui/styles": "^4.2.1",
"styled-components": "^4.3.2"
}
当我尝试以下操作时theme
存在于props
但它是一个空对象。
StyledApp.js:
import styled from "styled-components";
import Button from "@material-ui/core/Button";
export const StyledButtonUsingTheme = styled(Button)`
//Below will give "Cannot read property 'error' of undefined"
background-color: ${props => props.theme.palette.error.light};
`;
App.js:
import React from "react";
import "./App.css";
import { StylesProvider, ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core/styles";
import { StyledButtonUsingTheme } from "./StyledApp";
function App() {
const defaultTheme = createMuiTheme();
window.console.log("Default theme passing to ThemeProvider", defaultTheme);
return (
<StylesProvider injectFirst>
<ThemeProvider theme={defaultTheme}>
<div className="App">
<StyledButtonUsingTheme variant="outlined">
Styled Button Using Theme
</StyledButtonUsingTheme>
</div>
</ThemeProvider>
</StylesProvider>
);
}
export default App;
控制台.登录App.js
显示整个主题对象,这就是我传递给 ThemesProvider 的内容。有趣的是props.theme
有没有!但遗憾的是没有价值观。