web-dev-qa-db-ja.com

スタイル付きコンポーネントでMaterial-uiのテーマにアクセスする方法

Material-uiおよびStyled ComponentsタイプのスタイリングでCRAを使用しています。 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のc​​onsole.logには、テーマオブジェクト全体が表示されます。これが、ThemesProviderに渡します。興味深いことにprops.themeがあります。残念ながら値はありません。

reactjsmaterial-uistyled-components
9
wojjas

コメントのHorydが言うように、Styled-ComponentsのThemeProviderを使用すると、スタイル付きコンポーネント内のテーマプロパティにアクセスできます。ただし、Material-UIはそのテーマを独自のコンポーネントに適用しなくなりました。

私が見つけた回避策はそれが単純であるのと同じくらい醜いです両方のThemeprovidersを使用する。したがって、Material-UIはテーマをそのコンポーネントに適用し、スタイルが設定されたコンポーネントでテーマにアクセスできます。

import { ThemeProvider } from "styled-components";
import { MuiThemeProvider,StylesProvider } from "@material-ui/core/styles";

ReactDOM.render(

  //Make sure the Material stylesheet is placed above your own 
  //styles so you can overwrite them
  <StylesProvider injectFirst> 

    //Use the theme in the ThemeProvider for Material-UI so
    //styles are applied to the Material-UI components
    <MuiThemeProvider theme={theme}>

      //Use also the ThemeProvider for Styled-Components so 
      //you can access the theme in your own css
      <ThemeProvider theme={theme}>

        //Include your app and you have acces to everything 
        <App />

      </ThemeProvider>

    </MuiThemeProvider>

  </StylesProvider>,

document.getElementById("app"));
2
NLAnaconda

問題が解決しました！

解決策は以下を使用することです：import { ThemeProvider } from "styled-components"; App.jsの場合、themeはpropsオブジェクトのすべての値とともに存在します。

App.jsで「@ material-ui/styles」のThemeProviderを使用しましたimport { StylesProvider, ThemeProvider } from "@material-ui/styles"; St​​yledApp.jsの「スタイル付きコンポーネントからのスタイル付きインポート」ではうまく機能しません

作業中の2つのファイル：

App.js

import React from "react";
import "./App.css";

import { StylesProvider } from "@material-ui/styles";
import { ThemeProvider } from "styled-components";
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;

StyledApp.js

import styled from "styled-components";
import Button from "@material-ui/core/Button";

export const StyledButtonUsingTheme = styled(Button)`
  //Below will work now!
  background-color: ${props => props.theme.palette.error.light};
`;
3
wojjas

withThemeを使用できます：

App.js

import React from "react"
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles"
import { StyledButton } from "./StyledButton"

const App = () => {

    const theme = createMuiTheme();

    return (
        <ThemeProvider theme={theme}>
            <StyledButton />
        </ThemeProvider>
    )
}

export default App

StyledButton.js

import { styled, withTheme } from "@material-ui/core/styles"
import Button from "@material-ui/core/Button"

export const StyledButton= styled(withTheme(Button))(props => ({
  background: props.theme.palette.background.paper,
}))
3
Into Numbers