Использование тематики Material-UI со стилизованным компонентом

Question

Я изучаю Гэтсби и пытаюсь создать несколько компонентов, используя Material-UI и Styled Components, и применяю мою тему. Я успешно применил тему, выполнив настройки Gatsby для модуля plug-in material-ui, описанного здесь (https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/)

, а также приведенный здесь пример документации Material-ui ( https://material-ui.com/customization/palette/)

Моя проблема возникает при установке Styled Components, я больше не могу применять свои темы. Кажется, он правильно установлен, так как он следует некоторым другим правилам. Может кто-нибудь сказать мне, где я ошибаюсь при доступе к свойствам моей темы?

Это мой код, я разместил трейл, если он нужен, но навигация. 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 вместо 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>

Answer 1

Здесь есть пара вещей, которые я заметил. Вы можете попробовать применить ваш провайдер тем к функции wrapRootElement в gatsby-browser. js Это повысит уровень root и распространится через ваше приложение: wrapRootElement

You сообщаем вашему компоненту Nav, что он должен ожидать реквизит, но ничего не передает ему.

Должен ли ваш макет в индексе. js иметь дочерние элементы, переданные ему?