score:0
fyi on material ui 5 makestyles
is deprecated.
because tooltip is in portal you cannot style it directly
const styledtooltip = styled<typeof tooltip>(({ classname, ...props }) => (
<tooltip {...props} classes={{ popper: classname }} />
))``;
then in reder function you can use sx, by setting popper you can access child props via sx
<styledtooltip
open
arrow
sx={{
'& .muitooltip-arrow': {
background: 'red',
},
}}
/>
score:7
see tooltip css. use arrow
and &::before
to target the arrow and apply your styles. (note the double ::
there)
makestyles - style
arrow: {
fontsize: 20,
color: "#4a4a4a",
"&::before": {
backgroundcolor: "blue",
border: "2px solid red"
}
}
jsx
<tooltip classes={{ arrow: classes.arrow }} title="delete" arrow>
<iconbutton aria-label="delete">
<deleteicon />
</iconbutton>
</tooltip>
score:11
you are right, you need to override &:before
pseudoselector like this.
here is the code sandbox project link
import react from "react";
import button from "@material-ui/core/button";
import tooltip from "@material-ui/core/tooltip";
import { makestyles } from "@material-ui/core/styles";
const usestyles = makestyles(theme => ({
arrow: {
"&:before": {
border: "1px solid #e6e8ed"
},
color: theme.palette.common.white
},
tooltip: {
backgroundcolor: theme.palette.common.white,
border: "1px solid #e6e8ed",
color: "#4a4a4a"
}
}));
export default function arrowtooltips() {
let classes = usestyles();
return (
<tooltip
title="add"
arrow
classes={{ arrow: classes.arrow, tooltip: classes.tooltip }}
>
<button>arrow</button>
</tooltip>
);
}
Source: stackoverflow.com
Related Query
- custom styling for material UI tooltip arrow?
- How do I set multiple lines to my tooltip text for Material UI IconButton?
- Material UI tooltip doesn't display on custom component, despite spreading props to that component
- Custom styling with scss for react-bootstrap
- Confirmation for custom action in Material Tabel [React]
- Material-Table: styling is overiding all custom and Material UI styling and icons not rendering
- How do I set custom fonts for header, body, and button tags for Material UI?
- Custom sort for custom render cell Data Grid Material UI
- How to create insertion point to mount styles in shadow dom for MUI material v5 in React custom element
- What is meaning of symbol &tagname: for css styling in material UI. Ex: &div: { display: 'flex' '}
- Is there a way to use custom icon for material ui's pagination
- how to make tooltip for TextField material ui react hooks
- Adding custom CSS styling to Material UI KeyboardDatePicker
- React - Material ui tooltip arrow is not align to the buttons/container
- How to apply custom color theme for Material UI
- how to do Storybook React Material UI custom styling
- How to use Material UI ThemeManager for setting custom AppBar height and color?
- How to Add Arrow to material UI popover Like ToolTip
- Custom styling for Ant Design Steps connector?
- How to ignore Material UI theme styling for component?
- How to fit Tooltip to screen for mobile responsiveness in Material UI?
- Set custom text for material icon
- Material UI Tooltip does not appear when rendered inside of a custom Modal component
- how to perform a proper redirect in reactjs(16.13.0) code for a custom material ui component?
- How to customize tooltip styling in for Scatter plot in Highchart?
- How type material ui props for custom PopperComponent with Typescript
- How to use custom color for step label string in Material UI
- Can I use custom styling for loading message on @react-google-maps/api
- stopPropagation for Material UI Tooltip
- How to add custom onRowClick function for a field in Material Table?
More Query from same tag
- State variable inside a function defined within useEffect hook is not updating when value changes
- Redux devtool extenstion : How to Add Features property to enable/disable actions?
- Getting a " Parsing error: Unexpected token, expected ";" " while making a react application in the following code
- How to show placeholder instead of the state's value at pageload?
- How to Create Middleware for refresh token in Reactjs with axios and redux
- How to test an action creator with a fetch API request
- Using a state used in a header and updating its content based on Route with hooks
- How to test typescript function locally manually in React app?
- Spring security for REST api shows the browser popup when auth fails
- Input not writing into input field.. Issue caused by React useForm Hook register validations
- How can I convert date/time into human readable form in react?
- How to center view to new Markers with useMapEvents?
- What is the underscore "_" in JavaScript?
- 404 page on Route not working as expected with children
- Uncaught TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) in my React project
- integrating JS code into Framework7 project
- Replace a "Tag" ( string ) with all the matches in JavaScript
- setState doesn't update as expected
- React with Docusign Clickwrap API
- How do i map a JSON API response that contains an array of objects to an ag-grid table
- Alan AI Error Uncaught Error: The Alan Button instance has already been created. There cannot be two Alan Button instances created at the same time
- Calling functions in componentDidUpdate. Error: React limits the number of nested updates
- How to upload an Excel sheet file using react.js and display data to a table
- Alter values of xAxis in chartjs
- Module not found Can't resolve react-scroll-to-bottom
- React JS + React Router works with $.get but not $.ajax PUT
- Automatically span item width in CSS Grid
- The media could not be loaded error when trying to play a video in videojs
- js: TypeError: Cannot read property 'replace' of undefined using
- How to check if a value in an array is present in other object and accordingly return a new object