Maintain the default material-ui class styles while making customizations to override others

Currently, I am working on customizing the material-ui tooltip and specifically need to adjust the margin for the tooltipPlacementTop class:

    const useStyles = makeStyles(theme => ({
      tooltipPlacementTop: {
         margin: '4px 0' 
      },
    });
    ....
    <Tooltip classes={{ tooltipPlacementTop: classes.tooltipPlacementTop }} >

However, my current approach seems to override all default styles for this class. Is there a way to maintain the original material-ui styles while only modifying the specific one I require?

Upon further investigation, it appears that the issue stemmed from inadvertently overriding the classes property within my custom component that utilizes material-ui tooltip...

Issue resolved - Closing the question

cssreactjsmaterial-uioverriding

Answer №1

If you're exploring the material ui api docs, you'll find the implementation of the component there. Your goal seems to be tweaking the margin of tooltipPlacementTop while retaining other styles. By adding styles in this manner, they will complement existing styles rather than overwrite them. Perhaps you missed considering the theme breakpoint.

Here's a code snippet for reference:

import React from "react";
import "./styles.css";
import Tooltip from "@material-ui/core/Tooltip";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  tooltipPlacementTop: {
    margin: "4px 0",
    [theme.breakpoints.up("sm")]: {
      margin: "4px 0"
    }
  }
}));

function App() {
  const classes = useStyles();
  return (
    <div className="App" style={{ marginTop: 100 }}>
      <Tooltip title="hi there" classes={classes} placement="top">
        <h2>Hover me!</h2>
      </Tooltip>
    </div>
  );
}



const { Tooltip, makeStyles } = MaterialUI;

const useStyles = makeStyles((theme) => ({
  tooltipPlacementTop: {
    margin: "4px 0",
    [theme.breakpoints.up("sm")]: {
      margin: "4px 0"
    }
  }
}));

function App() {
  const classes = useStyles();
  return (
    <div className="App" style={{ marginTop: 50 }}>
      <Tooltip title="hi there" classes={classes} placement="top">
        <h2 style={{ textAlign: 'center' }}>Hover me!</h2>
      </Tooltip>
      <Tooltip title="hi there (normal)" placement="top">
        <h2 style={{ textAlign: 'center', marginTop: 50 }}>Hover me (default)!</h2>
      </Tooltip>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js" crossorigin></script>

<div id="root"></div>

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

Attempting to determine income in JavaScript with the inclusion of two distinct rates

Trying to come up with a salary calculation for different rates within the same timeframe is proving to be quite challenging. For instance, between 10:00-15:00 the rate is $20 per hour and from 15:00 onwards it drops to $15 per hour. Check out the entire ...

javascripthtmlreactjs

What is the best way to select an element that is currently visible but hidden underneath another element?

I have developed a circular graphic using primarily HTML and CSS, with some JavaScript and JQuery functionalities incorporated for text curving and planned interactions in the future. However, I've encountered an issue where clicking on the upper rig ...

javascriptjqueryhtmlcss

What is the best way to align the items in two lists at the center as if they were all individual

Q: How can I center the list-item elements of two unordered lists as if they were children of just one list? Example: {[1][1][1][1][2][2]} { [2][2] } CSS Alignment Challenge <div> <ul> &l ...

htmlcss

Creating a tooltip for a specific cell within an AG grid react component is a useful customization feature

How can I customize the tooltip for a specific row in my AG Grid? I see that there is a tooltipField available in ColDefs, but I want to provide a custom string instead of using a field value. Is there a way to achieve this customization? ...

javascriptreactjstooltipag-grid

Embracing Elegance with jQuery

Is there a way to customize the appearance of my list (<ul>) in the following code snippet? $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var self = this, currentCategory = ""; ...

jquerycss

What is the purpose of the 'offset' property in React Native's PanResponder?

TL;DR: Seeking clarity on the implementation of Panresponder code in React Native, specifically questioning the necessity of using the 'offset' value alongside the animated value. Full Question: The Situation: In my React Native project, I am ...

reactjsreact-nativeanimationgesture

An animation in CSS where an element moves off the screen to the right in absolute position and then returns from the

I am currently working on a website featuring moving clouds traveling across the screen from left to right. Although I have successfully implemented the animation for the clouds, there is one specific issue that has me stuck. My goal is to display some of ...

cssanimation

How can you combine accessibility with absolute positioning?

Have you seen our unique hamburger design? https://i.stack.imgur.com/AmT6P.png A simple click will reveal a neat popup (the class "open" is added to a div). https://i.stack.imgur.com/yPydJ.png This cool effect is achieved using fixed positioning, but i ...

htmlcssaccessibilitywcagwcag2.0

Issues with Bootstrap glyphicon not functioning correctly on mobile devices and Internet Explorer

Within my template, there is a navigation button positioned on the left side of the page that remains fixed as the user scrolls down. When clicked, this button triggers a menu to appear. Embedded within this button is a bootstrap glyphicon: <div class ...

htmlcsstwitter-bootstrap

Transforming a dynamic HTML layout into a non-responsive one: "RESPONSIVE NO MORE"

I'm currently working with an HTML document that has a responsive design. However, I now need to make it non-responsive. Can someone advise me on the most efficient and fastest way to do this? I attempted using min-width for both html and body, but ...

htmlcssresponsive-designmedia-queries

How to Eliminate Image Flickering While Loading in a React Component

Currently, I am developing a React component that takes an imageUrl and displays it on a canvas with a deliberate 2-second delay to mimic loading time for larger images. However, I have encountered a problem: when the imageUrl changes in the parent compone ...

javascriptreactjsreact-rendering

The alignment in Firefox and Google Chrome does not appear to be consistent

The appearance of the content is correct in Google Chrome but incorrect in Firefox. Does anyone have any suggestions on how to fix this for Firefox? ...

htmlcsspositionlesscss-position

Effectively managing user access by authorizing levels and securing routes

Below is the code snippet for a protected route where the authentication status is managed by Redux. If there is no token saved in local storage, the isAuthenticated state is set to false. This code snippet is for protecting routes: import PropTypes from & ...

reactjstypescriptreact-router-dom

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

While trying to reduce the left padding of the v-select menu checkbox using the F12 debugger, I encountered an issue where the menu suddenly disappears when clicked. This makes it difficult to see the active menu. Attached is a screenshot of the select me ...

cssvue.jsdrop-down-menuvuetify.jsdropdown

Achieving Harmony in Design: Striking a Balance Between the Heights of Textfield

Wondering if there are any best practices or recommended strategies for addressing this particular scenario. At the moment, I am using the following Material-UI packages: "dependencies": { "@emotion/react": "^11.11.1", ...

reactjsmaterial-ui

Using 2 viewports depending on the device

My website looks great on all devices and desktop, but I want to set a different viewport for iPad. I would like the iPad to have the same width as my desktop version, which is 1100px wide. Currently, the site is designed with percentages and ems up to (ma ...

cssipadviewport

The requested 'default' export (imported as 'LoadingButton') is not present in the module '@mui/lab/LoadingButton' (module does not have any exports available)

When trying to load buttons from MUI after running `npm install @mui/lab`, I encountered an error stating: "module has no exports". ...

reactjsnpmmaterial-uinpm-install

Exploring the process of implementing smooth transitions when toggling between light and dark modes using JavaScript

var container = document.querySelector(".container") var light2 = document.getElementById("light"); var dark2 = document.getElementById("dark"); light2.addEventListener('click', lightMode); function lightMode(){ contai ...

javascripthtmlcssdarkmode

What is the best way to create a seamless change from a black to white invert filter?

I'm currently working on a project where I need to change my icons from black to white. After some research, I found that the best way to do this is by using filter: invert(100%). However, when I try to transition it, the change happens abruptly after ...

htmlcss

React Router Issue: Component Not Rendering When <nav> Element Is Incomplete

I am currently experiencing an issue with rendering a component in my React TypeScript application using React Router. The problem arises when trying to navigate to the AddTask component by clicking on a link within a <nav> element. Strangely, the co ...

reactjstypescriptreact-routerreact-router-dom