[Feature] Can we add an option to customize the theme path root directory?

[bneigher]

trafficstars

Cool library. Took a while to figure out how to set it all up, but it works nicely.

One usability / code structure OCD complaint I have is that we NEED to have the src/gatsby-theme-material-ui-top-layout/... block in our codebase. It would be really nice to be able to change this path to a custom one.. like src/styles/...

A. Is this possible today? If so perhaps adding it to the docs would help. B. If not, any reason why this is not implemented? Would love to change this.

[oliviertassinari]

Took a while to figure out how to set it all up, but it works nicely.

@bneigher Is there anything we could improve from the official example?

[dannymatkovsky]

@oliviertassinari the need to have a gatsby-theme-material-ui-top-layout folder in src is a bit of annoying. It would be so much user-friendlier if we could set the path like

{
  resolve: 'gatsby-theme-material-ui',
  options: {
    themePath: require.resolve('./src/theme.js')
  }
}

p.s. Absolutely love everything else about the lib

[rejas]

But correct me if I am wrong but you dont have to use the top-layout. If you look at the code in there you see that it just uses some basic material-ui stuff that you can add to your own code like this:

import { CssBaseline, Container } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from '../../theme';

const Layout = (props) => {
...

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Container>
        {children}
      </Container>
    </ThemeProvider>
  );
};

[oliviertassinari]

@rejas How do you make sure to wrap the client and server React tree?

[rejas]

to be honest: i dont know (or what you mean exactly). you can see my page code at https://github.com/rejas/veeck.de if you want to take a look yourself

[oliviertassinari]

Ok, it works because of https://github.com/rejas/veeck.de/blob/9313878c70b289dd11446460cb0044e06db2dfad/gatsby-config.js#L74

[rejas]

I hope that it a correct way of doing it? I am not very familiar with the whole SSR thing (as can be read here: https://twitter.com/hansalbern/status/1252477133743628288)

[kleenkanteen]

Ok, it works because of https://github.com/rejas/veeck.de/blob/9313878c70b289dd11446460cb0044e06db2dfad/gatsby-config.js#L74

What does that line do exactly?

[adelin-b]

I also think it would be a nice addition to customize the path

When you open src and start seeing things like that :

Glorious