相关疑难解决方法(0)

如何在样式化组件中访问Material-ui的主题

我正在将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"
  }
Run Code Online (Sandbox Code Playgroud)

当我尝试以下内容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};
`;
Run Code Online (Sandbox Code Playgroud)

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 …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui styled-components

5
推荐指数
5
解决办法
1078
查看次数

标签 统计

material-ui ×1

reactjs ×1

styled-components ×1