使用带有样式组件的 Material-UI 主题

Posted 2023-03-15

【中文标题】使用带有样式组件的 Material-UI 主题

【英文标题】：Using Material-UI Theming with Styled Component

【发布时间】：2020-05-08 04:39:04

【问题描述】：

我正在学习 Gatsby，并尝试使用 Material-UI 和 Styled Components 构建一些组件并应用我的主题。我按照这里解释的 Material-ui 插件的 Gatsby 配置成功应用了主题(https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/)

还有 Material-ui 文档 此处提供的示例(https://material-ui.com/customization/palette/)

当我安装 Styled Components 时出现问题，我无法再应用我的主题。它似乎已正确安装，因为它确实遵循其他一些规则。有人能告诉我在访问我的主题属性时哪里出错了吗？

这是我的代码，我在需要时放置了路径，但 nav.js 是我的问题所在。

gatsby-config.js

module.exports = 
   plugins:[
   <other plugins>,
   
      resolve: 'gatsby-plugin-material-ui',
      // If you want to use styled components you should change the injection order.
      options: 
        StylesProvider: 
          injectFirst: true,
        ,
      ,
    ,
    'gatsby-plugin-styled-components',
  ]

主题.js

import React from 'react'
import  createMuiTheme, colors, MuiThemeProvider, StylesProvider  from '@material-ui/core';
import  ThemeProvider  from 'styled-components';
import CssBaseline from '@material-ui/core/CssBaseline'

// A custom theme for this app
const theme = createMuiTheme(
  palette: 
    type : 'dark',
    primary   :  500 : '#407855' ,
    secondary :  500 : '#9c27b0' ,
  ,
);

const ThemeWrapper = (props) => 
  return (
    <StylesProvider>
        <MuiThemeProvider theme=theme>
          <ThemeProvider theme=theme>
            <CssBaseline />
            props.children
          </ThemeProvider>
        </MuiThemeProvider>
    </StylesProvider>
  )


export default ThemeWrapper;

index.js

import React from 'react'
import ThemeWrapper from '../theme/theme'
import Layout from '../component/layout'
const IndexPage = ( data ) => 
    return (
        <ThemeWrapper>
            <Layout>
            </Layout>
        </ThemeWrapper>
    )

export default IndexPage

layout.js

import React from 'react'
import NavBar from './nav'
import Footer from '../component/footer'

const Layout = (props) => 
    return (
        <div>
            <div>
                <NavBar />
                props.children
            </div>
            <Footer />
        </div>
    )

export default Layout

nav.js

import React from 'react'
import styled from 'styled-components';
import  Link, graphql, useStaticQuery  from 'gatsby'

import  Paper, Tabs, Tab  from '@material-ui/core'

const StyledTabs = styled(Tabs)`
    backgroundColor: transparent;
    boxShadow: none;
    textColor: primary !important; // Doesn't work
    indicatorColor:$ props => props.data.theme.palette.secondary; // Doesn't work
    color : tomato; // Works
)`;


function Nav ( props ) 
    return ( 
        <Paper>
            <StyledTabs value=0>
                <Tab label="Item One" />
                <Tab label="Item Two" />
                <Tab label="Item Three" />
            </StyledTabs>
        </Paper>
    )


export default Nav 

如果我要使用 Tabs 和 Tab 组件而不是 StyledTabs 它可以工作

       <Paper>
            <Tabs textColor="primary" indicatorColor="secondary" value=0> //works perfectly
                <Tab label="Item One" />
                <Tab label="Item Two" />
                <Tab label="Item Three" />
            </StyledTabs>
        </Paper>

【参考方案1】：

这里有几件事我注意到了。您可以尝试将您的主题提供程序应用于 gatsby-browser.js 中的 wrapRootElement 功能，这会将其置于根级别并通过您的应用程序向下传播：wrapRootElement

你告诉你的 Nav 组件它应该期待 props 但没有向它传递任何东西。

您在 index.js 中的布局是否应该将子级传递给它？

【讨论】：

嘿 Molebox，感谢您抽出宝贵时间回复，我添加了两个文件和 gatsby-browser.js 和 gatsby-s-s-r.js 并将我的主题添加到其中 ``` import ThemeWrapper from " ./theme" export const wrapRootElement = ThemeWrapper ``` 但我现在不知道怎么用？我的样式化组件现在应该可以看到了吗？它最终不起作用，但事实是我不确定我是否正确使用它，因为我想知道它被应用于根目录是否意味着我不再需要将我的布局包装在索引中？但是当我删除我的包装时，它又回到了它的基本主题。

"你告诉你的 Nav 组件它应该期待 props 但没有传递任何东西给它。" - 我没有注意到，但我应该注意到，但现在我不确定如何从并行孩子那里检索这些值，我在想也许我应该导出主题选项并移动 ThemeProvider、MuiThemeProvider 等的定义.索引并将主题传递给孩子们？ “你的 index.js 中的布局应该有孩子传递给它吗？” - 我删除它们是为了减少问题的混乱