Question

我正在学习Gatsby，并尝试使用Material-UI和Styled Components并应用我的主题来构建一些组件。我遵循了此处（https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/）

所解释的material-ui插件的Gatsby配置，成功地应用了主题

以及Material-ui文档此处提供的示例（https://material-ui.com/customization/palette/）

我在安装样式化组件时遇到问题，无法再应用主题。它似乎遵循其他规则，因此似乎已正确安装。有人可以告诉我访问主题属性时我出了什么问题吗？

这是我的代码，我把跟踪放在万一需要的地方，但是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',
  ]

theme.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组件而不是StyledTab，那么它将起作用

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

Answer 1

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

您要告诉Nav组件它应该有道具，但没有传递任何东西给它。

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

将Material-UI主题与样式化组件一起使用

1 个答案: