Using Material-UI Theming with Styled Component

Question

I'm learning Gatsby and attempting to build a few components using Material-UI and Styled Components and applying my theme. I was successful in applying a theme by following the Gatsby configurations for the material-ui plug-in explained here(https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/)

and also the Material-ui documentation example provided here(https://material-ui.com/customization/palette/)

My problem arrives when I install Styled Components, I can no longer apply my themes. It seems to be correctly installed as it does follow some other rules. Could someone tell me where I'm going wrong in accessing my theme properties?

This is my code, I placed the trail incase it's needed but nav.js is where my problem is.

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

If I were to use the Tabs and Tab component instead of the StyledTabs it works

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

score 0 · Answer 1 · answered Jan 22 '20 at 08:55

0

Theres a couple of things here that i noticed. You could try applying your theme provider to the wrapRootElement funciton in gatsby-browser.js This will put it at the root level and propogate down through your app: wrapRootElement

You are telling your Nav component that it should expect props but are not passing anything to it.

Should your Layout in index.js have children passed to it?

answered Jan 22 '20 at 08:55

molebox

585
1
8
17

Hey Molebox, thank you for taking the time to respond, I added the two files and gatsby-browser.js and gatsby-ssr.js and added my themes into them ``` import ThemeWrapper from "./theme" export const wrapRootElement = ThemeWrapper ``` but I'm not certain how to use it now? Should my styled components now be able to see it? It ended up not working but truth is I'm not sure if I'm using it appropriately as I was wondering since it is being applied to the root does that mean I don't need to wrap my layout in index anymore? but when I removed my wrapper it returned to its base theme. – alexander Windelberg Jan 23 '20 at 05:17
"You are telling your Nav component that it should expect props but are not passing anything to it." - I didn't notice but yeah I am supposed to but now I'm uncertain how I retrieve those values from a parallel child, I'm thinking maybe I should export the theme options and move the defining of the ThemeProvider, MuiThemeProvider and ect. to index and pass the theme down to the children? "Should your Layout in index.js have children passed to it?" - it does I removed them to reduce clutter for the question – alexander Windelberg Jan 23 '20 at 05:45

Using Material-UI Theming with Styled Component

1 Answers1

Linked