Material UI in docusaurus

[MaheshReddy-05]

I had created a rfc using material UI button, when I'm trying to import that rfc in the docusaurus.config.js and to use that button in the top nav-bar I'm getting import statements outside the modules so i tried with normal rfc which return a basic h1 tag even there I'm getting same error so i change the import React to const React = requ(....), Now I'm getting error

Web\src\components\Buttons\BasicButton.jsx:5
    <div>
    ^

SyntaxError: Unexpected token '<'
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:12

my rfc

const React = require('react');

function BasicButton(props) {
  return (
    <div>
      <h1> "Hello"</h1>
    </div>
  );
}

export default BasicButton;

docusaurus

const ExternalLinkButton = require('./src/components/Buttons/BasicButton.jsx');
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
const math = require('remark-math');
const katex = require('rehype-katex');

 themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: 'Coding Decoded',
    
        items: [
          {
            label: 'Tutorials',
            to: '/tutorials/category/basic-topics',
            activeBaseRegex: `/tutorials/`,
          },
          {
            type: 'custom',
            component: ExternalLinkButton,
            to: '/solutions/category/0000---0099',
            label: 'External Link',
            position: 'right',
          },
          {
            label: 'Solutions',
            to: '/solutions/category/0000---0099',
            activeBaseRegex: `/solutions/`,
          },

in the above I'm trying to use that button

can someone help me out how to solve this issue

[MaheshReddy-05]

Got Solved in Discord by userdocs

Create a file in src/theme/NavbarItem/ComponentTypes.js to add a custom navbar item type to the existing mapping,

import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
import ExternalLinkButton from '@site/src/components/Buttons/BasicButton.jsx';

export default {
  ...ComponentTypes,
  'custom-myAwesomeNavbarItem': ExternalLinkButton,
};

Add this to Docusaurus.config.js in items

 {
      type: "custom-myAwesomeNavbarItem",
      position: "right",
  },

I don't know but, custom href is 2-3 sec slow than Docusaurus href

[slorber]

I don't know but, custom href is 2-3 sec slow than Docusaurus href

I don't know what you mean here 😅 Give us a repro link, live site URL to see the problem, or record a video showing the problem.

---

In general it's not recommended to use MUI with Docusaurus because MUI is using runtime CSS in js and this requires a deeper integration to make it work nicely without FOUC

[MaheshReddy-05]

Now I'm using default as I felt slow so I modified that repo, no worries I will create a dummy one and will see again if I find it slow I will share the link here.

[MaheshReddy-05]

https://github.com/MaheshReddy-05/Testing

Look into this,
I created rfc (click me) which redirects to ./blog

the issue here is when I click on customized rfc(click me) the webpage is loading but when I click on direct item blog the website is not loading

Is there any way that even when I click on the customized rfc the webpage shouldn't load and redirect

I was kinda new to web dev.