import global styles into a jsx file

[glitch-txs]

Hi, I'm trying to use some global pre-defined styles to mimic the styling of some components I'm adding to the sidebar manually. How could I import them into the file?

What I have:

import React from 'react';
import DocSidebar from '@theme-original/DocSidebar';

export default function DocSidebarWrapper(props) {
  return (
    <>
        <li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item">
            something here
        </li>
        <DocSidebar {...props} />
    </>
  );
}

But these classes are not working theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item

[slorber]

Those theme- classes are not styled, they are added so that you can target them with your own custom CSS, but we don't use them internally for styling.

https://docusaurus.io/docs/next/styling-layout#theme-class-names

The classes we use for styling are either coming from CSS modules (scoped, with a hash at the end) or from our historical design system Infima (https://infima.dev/) (that I plan to merge back into theme classic later)

Outside Infima, our classnames and styles are not really meant to be reused. However we could split our theme into smaller more granular React components that you could import in your own code.