Enhance the aesthetics of material-ui tooltips by utilizing @emotion/styled

Can material-ui tooltips be customized using the styled function from @emotion/styled?

import { Tooltip } from '@material-ui/core';
import styled from '@emotion/styled';

const MyTooltip = styled(Tooltip)`
    // customize the tooltip label
`

I attempted to utilize the global Mui classes, but was unsuccessful. I am aware that an alternative is to employ createMuiTheme and utilize <ThemeProvider> to implement it, however, this will also apply the default theme to the children of the Tooltip component.

cssreactjsmaterial-uiemotion

Answer №1

One of the challenges when styling Tooltip in this way is that Tooltip does not have built-in support for a className prop, which is typically added by the styled function - instead, the className prop needs to be passed down to the element within the tooltip.

To work around this issue, you can intercept the props passed by styled and utilize the classes prop of Tooltip as demonstrated below:

import React from "react";
import { StylesProvider } from "@material-ui/core/styles";

import Tooltip from "@material-ui/core/Tooltip";
import styled from "@emotion/styled";

const StyledTooltip = styled(({ className, ...other }) => (
  <Tooltip classes={{ tooltip: className }} {...other} />
))`
  font-size: 2em;
  color: blue;
  background-color: yellow;
`;
export default function App() {
  return (
    <StylesProvider injectFirst>
      <StyledTooltip title="Test tooltip">
        <span>Hover over me</span>
      </StyledTooltip>
    </StylesProvider>
  );
}

https://codesandbox.io/s/emotionstyled-tooltip-krlz3?fontsize=14&hidenavigation=1&theme=dark

For more information on this topic, see the related GitHub issue: https://github.com/mui-org/material-ui/issues/11467

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

Updating React component props

After updating the state in a component and passing the new props into the child, I noticed that the child is not updating correctly and the defaultValue of the input is not changing. My initial thought was that using this.props could be the issue, so I sw ...

javascriptreactjsreact-props

What is the reason for React not offering a transpiler?

I have been exploring the world of creating React projects without using create-react-app. In all the examples I have seen, Babel is always used to convert JSX into JavaScript. It seems a bit surprising that the React team heavily depends on an external t ...

reactjs

Ways to compel string type or disregard type?

When using the following code snippet: <Image src={user?.profilePictureUrl} alt={user?.name} /> An error is encountered: Type 'string | null | undefined' is not assignable to type 'string | StaticImport'. Type 'undefined ...

reactjstypescriptnext.js

Add the onclick() functionality to a personalized Angular 4 directive

I'm facing an issue with accessing the style of a button in my directive. I want to add a margin-left property to the button using an onclick() function in the directive. However, it doesn't seem to be working. Strangely, setting the CSS from the ...

javascriptcssangulartypescriptangularjs-directive

Symbol within material UI button

I'm a beginner in React and I'm facing an issue. I have delete icons on buttons, and there are multiple buttons on the front-end. I want only the clicked button to be deleted or disappear, leaving the rest of the buttons untouched and visible on ...

reactjsiconsmaterial-designmaterial-ui

Place a Material-UI tooltip within a specified container to ensure it stays within the boundaries of the container and does not protrude

add image details here Take a look at the scenario illustrated in this image: When I hover over the button (click) on the left side, the tooltip extends beyond the confines of the red-bordered container. The same issue arises with the button on the right ...

material-uitooltipreact-props

How to open a new tab in ReactJS

When attempting to open a component in a new tab using the Link in React router, it results in a 404 error page being displayed instead of the desired react component. The main React entry point file (js), import React from 'react'; import { re ...

reactjsreact-router

How about creating a React user interface using a drag-and-drop builder?

Currently, I'm in the process of developing my own web-based version of a painting software similar to MS Paint using React. The initial javascript canvas code has been completed, and now I am focusing on creating an aesthetically pleasing GUI that in ...

reactjsmaterial-uireact-bootstrapchakra-ui

A contact form overlaying a muted Google Maps view in an HTML website

Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page. After trying out a few solutions, I ende ...

htmlcssgoogle-mapsiframe

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

javascriptjquerycssd3.jsuser-input

What are the placeholders for the "localIdentName" query tag in a custom CSS-loader for Webpack?

Just starting out with Webpack and experimenting with the css-loader. I came across the option to specify a localIdentName query tag on the Github page under "Local Scope". This tag allows us to define our own custom values for how classes should be named ...

javascriptcsswebpackloader

challenges arise when using star icons to rate items visually, as the corresponding hidden values for backend processing are linked to radio input types

Hello, I am trying to retrieve the value of an input type radio by clicking on a star image visually. I have been successful in this, but I am having trouble resetting the star image in another row. You can view a demo of this here. I will explain what I ...

jqueryhtmlcssdefault-valuerating

Having trouble with Next.js, authLink, httpLink, and GraphQL subscription integration

Struggling to make this work as expected. After some research, I discovered that nextjs/ssr has compatibility issues with subscriptions and it's important to verify the existence of process.browser. However, I am facing challenges in integrating my au ...

reactjsnext.jsgraphqlapollo-client

How can I retrieve the URL of images listed in my CSS file using Python?

I need help extracting all image URLs used in a CSS file. Here is an example snippet from my CSS file: sitewrap { width: 890px; margin: 0 auto; background: #ffffff url(../images/bg_sitewrap.gif) repeat-y; } Can anyone advise on how to extract ...

pythoncss

Utilizing CSS to Select Specific Sections

I'm curious about how to target a section element with a specific id like #dress in CSS3. Here is my code snippet: <section id="dress"> <p>Lorem Ipsum..................................of Lorem Ipsum.<> </section> Here's ...

css

Leverage the power of axios in your React application to retrieve information from an

I have been exploring how to use axios for fetching data from an API (https://reqres.in/) and displaying it in my React application. Previously, I used the fetch method in JavaScript to retrieve data from APIs. Despite trying various resources, I am unsure ...

javascriptreactjsaxios

The sub-menu options are constantly shifting... How can I keep them in place?

Here we go again... I'm having trouble with my sub-menu elements moving when I hover over them. I've searched for a solution but haven't found anything helpful. The previous advice I received about matching padding and adding transparent bo ...

htmlcss

When conducting a test, it was found that the JSX element labeled as 'AddIcon' does not possess any construct or call signatures

Here is a code snippet I'm currently working with: const tableIcons: Icons = { Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />), Check: forwardRef((props, ref) => <Check {...props} ref={ref} />) }; const AddIcon ...

reactjstypescriptreact-testing-library

Emphasizing a full row within a table is a way to draw attention

I have a piece of HTML/CSS code that successfully underlines the text in a single table cell when hovering over it. However, I want to extend this effect to underline all text in a row of cells, rather than just one cell. It's not necessary for the en ...

htmlcss

Issue with Google Maps functionality within the jQuery easytabs platform

Upon clicking the contact tab, the gmaps loads but unfortunately only shows the left corner of the map. Quite intriguing... Any thoughts on how to fix this? Here is the corresponding jsfiddle This is the structure of my HTML code: <div id="menu-contai ...

jqueryhtmlcssgoogle-maps