Custom CSS not working in deployment

[fokkedekker]

Hi All,

I have redoc enabled on our docs site and changed some of the styling using the Docusaurus custom CSS file. Everything is fine on my local machine but once I deploy the custom CSS is completely ignored. Is anyone familiar with this behaviour and knows how to fix it?

I have a fairly standard install

Including my API files

 // Redocusaurus config
      [
        'redocusaurus',
        {

          // Plugin Options for loading OpenAPI files
          specs: [
            {
              id: "coordination",
              spec: 'api/coordination.yaml',
              route: '/api/coordination',
            },
            {
              id: "compute",
              spec: 'api/compute.yaml',
              route: '/api/compute',
            }
          ],
          // Theme Options for modifying how redoc renders them
          theme: {
            // Change with your site colors
            primaryColor: '#1890ff',
          },
        }
      ],

Adding the custom CSS

 [
        'classic',
        /** @type {import('@docusaurus/preset-classic').Options} */
        ({
          docs: {
            sidebarPath: require.resolve('./sidebars.js'),
            editUrl:
              'https://github.com/',
            remarkPlugins: [mdxMermaid],
            showLastUpdateAuthor: true,
            showLastUpdateTime: true,

            // exclude the shared markdown folder 
            exclude: ['shared/**/*.md'],

          },
          blog: {
            showReadingTime: true,
            editUrl:
              'https://github.com/',
          },
          theme: {
            customCss: require.resolve('./src/css/custom.css'),
          },

        }),
      ],

[rohit-gohri]

Is the custom css part of the bundle atleast?
If not then probably a better idea to open this in Docusaurus repo.
If yes, then maybe redoc theme css is loaded later and it overwrites it? Hard to debug without an example

[rohit-gohri]

redoc uses css-in-js for styles. so it applies the styles at runtime. You can try using .redocusaurus selector as a prefix to your styles?

[fokkedekker]

I see that is where the issues start on my end. Those class names are generated by JS I assume and differ from my local machine and production.

[fokkedekker]

I am not too familiar with css-in-js, but how are class names generated in this case? It's a bit hard to override anything if they change from device to device so I assume there is some trick to overriding with local CSS?

[rohit-gohri]

Those class names are generated by JS I assume

Yes, correct.

I am not too familiar with css-in-js, but how are class names generated in this case?

Even I'm not sure how it happens. But it's a hash dependent on the css and order of elements AFAIK.

there is some trick to overriding with local CSS?

You can have a look at how I override some styles to make redoc play nice with docusaurus - https://github.com/rohit-gohri/redocusaurus/blob/main/packages/docusaurus-theme-redoc/src/theme/Redoc/styles.css

[fokkedekker]

That works I'll just have to be more specific about which elements and how I select them.