Tips for changing the font size of labels in a tree view using Material UI

While working with material ui treeview, I have customized the fontSize for each treeItem as shown below:

<TreeItem
          key={mainCategory.name}
          nodeId={mainCategory.name}
          label={mainCategory.name}
          disabled={
            !mainCategory.department?.includes(employee?.currentUser?.role!) &&
            !mainCategory.department?.includes("all")
          }
          sx={{
            paddingBottom: "1rem",
            fontSize: "1.9rem",
            "& .MuiTreeItem-label": {
              fontSize: "1.8rem",
            },
          }}
        >
          {renderSubCategories(mainCategory.name)}
        </TreeItem>

The issue I'm facing is that changes in font size are only reflected when I run the project using npm start. After updating the font size and saving (ctrl+s), if I close or refresh the project, the styles revert back to default. The complete code can be found below:

interface ChildProps {
  accordianCat: Categories[];
}

const TreeViewComp = ({ accordianCat }: ChildProps) => {
  const { employee } = useTypedSelector((state) => state);
  // More code here...

Answer №1

I encountered a similar issue. To resolve it temporarily, I made the following adjustment which helped fix the problem.

<TreeItem itemId="menu-id" label={<span style={{ fontSize: "12px"}}>MenuName</span>} />

Alternatively, you can create a function like this:

const generateLabelNode = (str: string): ReactNode => {
  return <span style={{ fontSize: "12px" }}>{str}</span>;
};

<TreeItem itemId="general-font" label={generateLabelNode("something")} />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to adjust my column position in order to make the links clickable?

Looking for help with a mobile version website menu bar design. The issue is that the central "+" button is covering the two icons on either side, making them unclickable. Is there a solution to rearrange this layout? Here is the current design: https:// ...

Using two body tags in the code of a Wordpress site can lead to malfunctioning

I've encountered a strange issue with my Wordpress sites hosted on BlueHost. There seems to be a double <head> tag appearing in the HTML code, even though there is only one. This duplicate tag is causing issues with the proper rendering of the s ...

Show a Toast in React without relying on useEffect to manage the state

I have successfully implemented the Toast functionality from react-bootstrap into my application using the provided code. However, I am unsure if it is necessary to utilize useEffect to set show with setShow(items.length > 0);. Would it be simpler to ...

Switch the default blue color of Ngx-Pagination to a different color option

I am currently using the ngx-pagination plugin in my Angular 16 project and I would like to change the default blue color to a different one, is there anyone who can assist me with this? https://i.sstatic.net/NNuy7.png This is the HTML code snippet: < ...

Having trouble with customizing the active style of the React Bootstrap nav links

Is there a way to create an active tab menu that changes style when hovered over? I've tried using activeClassName="selected" but it doesn't seem to be working. Can anyone provide some guidance on how to address this issue? Here is the CSS I am ...

I'm having trouble getting my state to update in React when using useState

I am facing an issue with rendering a component that has a route using react router. The first component contains a button, and upon clicking it should render another component with state passed down from the initial component. However, even though the pag ...

Adjustable height for the absolute element

Having a bit of an issue with the height of the absolute div. About: .wrapper - I want the wrapper to automatically adjust its height but be limited by a max-height. (No scrolling for the wrapper) .title - Just a title .content - The problem aris ...

Error in Next.js due to component not being rendered despite being present

useSession((s) => s.user) will either return a user object or null. The index page should display the user's name, and is surrounded by a PrivatePageProvider that redirects the client if the user object is null. However, an error occurs as IndexPag ...

Challenges with focusing on TextArea inside a React MUI dialog

Having trouble implementing a multiline TextField within a dialog component. This issue has been causing me some difficulties for a while now. I'm not sure if it's related to Material-UI or possibly how my react page (dialog) is re-rendering. C ...

Abundance of DOM elements - the difference between hidden and display none

When I have numerous DOM elements on my page and assign them all a display: none property, the browser continues to perform quickly (smooth scrolling and snappy page response). But if I hide the elements using visibility: hidden instead, the browser slows ...

Embedding SVG styling directly into the HTML document

When importing svg images with color into Mapbox Studio, they appear as black and white. The troubleshooting website mentions: If your SVG appears black after adding to Mapbox Studio, it may be due to using style properties in tags instead of inline sty ...

Exploring the functionality of Jquery with the :active selector

Here is the code I have been working on: $('#ss a:active').parent().addClass('ss-active'); It seems like my code is not functioning as expected. Can you help me figure out how to achieve my desired outcome? Additionally, I want the bu ...

NextJs experiencing hydration issue due to a basic array.map operation

Having an odd hydration issue while working with NextJS. I could use some assistance figuring out what's causing it. I have an object that is being processed synchronously. When I stringify this object and render it, everything works fine without any ...

What is the best method for disabling autoscroll for a specific div id when the :target attribute

I created this accordion menu using only html and css, but the buttons are built with the :target id. Is there a way to prevent the automatic scrolling when any button is clicked without using javascript? It currently moves to the anchor #id. I've se ...

"Implementing Hot Module Replacement in Electron: A Step-by-Step Guide

Is there a way to enable Hot Module Replacement (HMR) in a React Electron application? Do I need webpack for this integration, and how can it be seamlessly implemented alongside Electron? ...

The module cannot be located, despite my efforts to reinstall and verify all addresses, the error still persists

Error in showStudent component: Module not located: Unable to resolve '@material-ui/data-grid' in 'C:\Users\USER\Desktop\Database\client\src\components\showStudent' The code in the showstudent ...

How can union types be used correctly in a generic functional component when type 'U' is not assignable to type 'T'?

I've been researching this issue online and have found a few similar cases, but the concept of Generic convolution is causing confusion in each example. I have tried various solutions, with the most promising one being using Omit which I thought would ...

How about creating a website using a combination of Static HTML and dynamic SEO-friendly Reactjs/Nextjs, along with developing a mobile app using

I must admit, I am fairly new to all of this. With my new business, I want to try coding some things myself as a proof of concept until we can afford to hire professional coders. Our platform will consist of 4 main areas and I'm not certain if my app ...

Hold off on sending POST request until receiving information from external API

Currently, I'm integrating the IBM Watson Tone Analyser API with both Express.js and React in my project. Here's the code snippet that communicates with the Watson API: res.tone to be a string representing the tone received from the analysis ...

Struggling to get the onHover effect working with the Grid item component in MaterialUI

I'm currently working on a Grid layout with nested Grid components, but I've run into an issue where applying inline styles to the Grid item component isn't working as expected. As a newcomer to MaterialUI in ReactJS, I could really use some ...