docz

docz copied to clipboard

Docz with extended Material UI Theme and Typescript

I have extended Material UI Theme properties. docz does not recognize this. If I read the document in seems like I need to put the wrapper in src/gatsby-theme-docz?Am i right?

Any case it does not work.. Further. more it does not make sense that I need to use gatsby to have a themeprovider. How do i enable a to have a simple theme wrapper?

Here is my directory

/src/components /src/theme /src/gatsby-theme-docz

Inside src/gatsby-theme-docz - I have index.tsx like so

import React, { useState } from 'react'

import { ThemeContext, ThemeProvider, ThemeZoom } from '../theme'
import globalState from '../global-state'

export default (props:any) => {
  const [themeZoom, setThemeZoom] = useState<ThemeZoom>(globalState.themeZoom)

  return (
    <ThemeContext.Provider value={{ themeZoom, setThemeZoom }}>
      <ThemeProvider>
      {props.children}
    </ThemeProvider>
    </ThemeContext.Provider>
  )
}

Here is doczrc.js

export default  {
  typescript: true,
  files: '**/*.{md,mdx}',
  menu: ['Getting Started', 'Components'],
  theme: 'src/theme/index',
  ignore: [
    'README.md'
  ],
  codeSandbox: false,
}

I love docz - so I hope I will get over the hurdles.

Thanks in advance

Hey, would you be able to create a minimal repo where this is reproduced? As I am not sure what the error is? What you expect to happen and what does not happen? Is it just that the wrapper is not being shadowed?

Thanks for your response

Please see the below repo:

https://github.com/ukris/docz-material-ui

Hello ? Any updates?

I believe the file name is supposed to be src/gatsby-theme-docz/wrapper.js. Docz picks it up but it doesn't seem to find any imports from outside the gatsby-theme-docz directory. I have a similar theme.js file located in src but docz can seem to find it. It's missing from the .docz build directory

Hey, I would also like to see this issue be solved, but in the meantime i thought i'd share how i solved it temporarily if there's other people out there with the same problem.

The basic wrapper

/* ./src/gatsby-theme-docz/wrapper.js */

import React from 'react';
import { ThemeProvider } from 'styled-components';
import theme from '@/theme';

export default ({ children }) => (
    <ThemeProvider theme={theme}>
        {children}
    </ThemeProvider>
);

Then i solved the import issue by creating a custom plugin that creates an alias to our src folder

/* ./doczrc.js */
import { createPlugin } from 'docz-core';

const importFix = () =>
    createPlugin({
        onCreateWebpackConfig: ({ actions }) => {
            const path = require('path');
            actions.setWebpackConfig({
                resolve: {
                    modules: [path.resolve(__dirname, '../src'), 'node_modules'],
                    alias: {
                        '@': path.resolve(__dirname, '../src'),
                    },
                },
            });
        },
    });

export default {
    plugins: [importFix()],
};

Having the same issue, would love to see it fixed out of the box. @AndreasJJ, the above solution works for me.

This kind of works for me but having your custom wrapper make me loose the sidebar with links, is there a way to keep the default page structure or I need to rebuild it myself from scratch?

EDIT: I see using wrapper.js file works as expected actually, I was using index.js instead thanks for this solution!