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

There was an unexpected error: Unable to access the 'bool' property of an undefined object

{ "name": "unique-react", "version": "2.0.1", "private": true, "scripts": { "start": "webpack-dev-server --hot --port 3002 --open --inline", "build": "cross-env NODE_ENV=production rimraf dist && webpack", "package": "webpack -p ...

javascriptreactjsnpmundefinedreact-proptypes

Can anyone provide guidance on how to create this particular shadow effect using CSS?

Is there a method to use CSS to create a green shadow in that particular shape? ...

cssshadows

What location is ideal for making API calls with React and Redux-thunk?

After extensively searching on StackOverflow.com and across the internet, I couldn't find a similar question. Therefore, please refrain from giving negative reputations if you happen to come across one as I truly need reputation at this point in my li ...

javascriptreactjsapireduxredux-thunk

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

I am looking to dynamically inject HTML content and CSS URLs using JavaScript. I have more than 3 CSS files that need to be downloaded before the content can be displayed on the page. Is there a way to check if the aforementioned CSS files have finished ...

javascriptcssajaxparallel-processing

Issue with the table background in Internet Explorer

My website displays a table with a background image that appears normal in FF and Chrome, but not in IE. The background image seems to shift and produce strange results. Can anyone here help me figure out what's causing this issue? Please refer to the ...

csshtmlinternet-explorer

How to efficiently fetch Redux state through reducers with an action-based approach

Utilizing Redux actions to manage a list of contacts, I am facing an issue where I am unable to retrieve the actual state contact. Despite setting the contact in the action, all I receive is the contact set within the action itself. Can someone guide me on ...

reactjstypescriptreact-redux

changing the reducer results in the removal of the previous state

I am currently working on the following code: types.ts export interface Window { id: string; name: string; target?: string; } export interface WindowState { windows: Window[]; } export const ADD_TARGET = 'ADD_TARGET' interface ...

reactjsredux

Experimenting with Redux Saga by incorporating data from the action that prompts its execution

I have a perfectly functioning saga where I call an action with some data, triggering the saga to pull values from the action, make an API call, and then do some yield puts - it works like a charm. However, testing this saga is giving me some trouble. To ...

reactjsreduxreact-reduxredux-saga

Utilize .map function to format a date string and generate a table

I am currently utilizing .map along with React in order to generate a table using a coupons object. My goal is to format a date string into the "mm/dd/yyyy" format, with coupon.starts_at typically being set as coupon.starts_at = "2013-08-03T02:00:00Z" I h ...

javascriptreactjsjsx

Create new <div> elements dynamically within a loop using the value of a variable as a condition

I am in need of assistance with a function that generates news tiles ("cards") as displayed below: renderNews = <div className={styles["my-Grid-col"] + " " + styles["col-sm12"]+ " " + styles["col-md12"] + " " + styles["col-lg12"] + " " + styles["col-xl ...

javascriptreactjssass

Incorporate a smooth transition effect to a dynamically resizing div button

In my current setup, I have 3 buttons that can toggle between different visible divs. In the future, I may add more buttons to switch between additional divs. At the moment, the first div is active (display set to block), while all other divs are hidden ( ...

javascripthtmlcss

Tips for utilizing API routes in NextJS 13

Previously, when I utilized Express, I stored the user as request.user: import jwt from "jsonwebtoken"; import asyncHandler from "express-async-handler"; import User from "../models/userModel.js"; const protect = asyncHandl ...

reactjsmiddlewarenext.js13

Issue: App is not being styled with Material UI Theme Colors

I'm having trouble changing the primary and secondary colors of Material UI. Even after setting the colors in the theme, the controls like Buttons or Fabs still use the default colors. Can someone help me figure out what I'm missing? index.js /* ...

javascriptreactjsmaterial-ui

Using React Native to iterate over a multidimensional array with the array map function

I want to iterate through a two-dimensional array like the one below: var array=[["1"],["3","8"],["4","8","3"],["4","8","3","9"],["1","8","3","9","2"],["6","8","3","9","2","1"],["4","8","3","9","2","11","2"]] Currently, this code only loops through the & ...

javascriptarraysmultidimensional-arrayreactjsreact-native

It is essential for every child within an array or iterator to possess its own distinctive "key" prop when working in reactjs

Despite consulting the ReactJS documentation and various tips on StackOverflow, I am still completely confused by an error in my console. The issue arises when trying to display a list of book titles ({item.volumeInfo.title}) while encountering an error. ...

javascriptreactjskey

The dynamic relationship between redux and useEffect

I encountered a challenge while working on a function that loads data into a component artificially, recreating a page display based on the uploaded data. The issue arises with the timing of useEffect execution in the code provided below: const funcA = (p ...

javascriptreactjsreact-reduxreact-hooks

What is the best way to accomplish this in Next.js?

I am working on a NextJs application and I need to include a new route /cabinet with its own navigation. The challenge is that the application already has a navigation bar defined in _app.js. Is it possible to create a similar setup like _app.js for /cab ...

javascriptreactjsnext.js

Subclass declaration with an assignment - React.Component

I recently started going through a React tutorial on Egghead and came across an interesting class declaration in one of the lessons: class StopWatch extends React.Component { state = {lapse: 0, running: false} render() { const ...

javascriptreactjssyntaxecmascript-6ecmascript-next

Please select the links located beneath the see-through triangular or polygonal shapes

Review the code snippet provided at the following link: http://jsfiddle.net/q8Ycz <div style="background-color: red; width: 200px;" onclick="alert('behind')"> <div><a href="test">test test test test test test test test test ...

htmlcsssvg

Try incorporating a variety of colors to enhance the appearance of your paper-menu in Polymer 1

I'm currently working on creating a customized menu using Polymer 1.0. This is how my menu structure looks like: <paper-menu> <template is="dom-repeat" items="{{menu}}" as="item"> <paper-item> <div>{{item.title}}</div& ...

csscolorspolymer