Comments (1)
To achieve the expected behavior where the outlined gavel icon has the inside not filled in, you need to customize the icon using Material-UI icons. You can leverage the createTheme
and ThemeProvider
components from Material-UI to customize the icon color.
Here's a step-by-step guide on how you can make this adjustment:
- In your React project, make sure you have installed
@mui/icons-material
version5.15.17
. - Locate the component or file where you are rendering the gavel icons in your project.
- Add the following imports from Material-UI at the top of your file:
import { createTheme, ThemeProvider } from '@mui/system';
- Create a custom theme to set the inside color of the outlined gavel icon as transparent. Define your custom theme by adding the following code before the component where you are rendering the icons:
const theme = createTheme({
components: {
MuiSvgIcon: {
styleOverrides: {
root: {
'&.MuiOutlined': {
'& path': {
fill: 'transparent',
},
},
},
},
},
},
});
- Wrap the rendering of your gavel icons with the
ThemeProvider
component and pass in thetheme
you just created. Your component should look like this:
<ThemeProvider theme={theme}>
// Render your gavel icons here
</ThemeProvider>
By following these steps, you should now see the outlined gavel icon with the inside not filled in, as the inside color will be set to transparent based on the custom theme you applied using Material-UI.
from material-ui.
Related Issues (20)
- [material-ui][Rating] Refactor & expose a single `Star` component
- docs(readme): incorrect pnpm script HOT 1
- docs(readme): incorrect and missing pnpm scripts
- Right-Click Context Menu Not Appearing in MUI DataTable Component React JS
- [Autocomplete] onHighlightChange called with undefined event contrary to type definition
- Mui fails to render Tabs when using nextjs experimental.taint setted to true
- Menu - MenuItem - after opening Menu is not possible to refresh page by ctrl + R
- Theme defaultProps do not get applied since 5.16.0 HOT 4
- [material-ui][Menu,Popover] `slotProps` cannot modify backdrop slot HOT 1
- [material-ui][v6] variants breaking changes lead to unexpected behavior in component customization HOT 3
- [material-ui][Autocomplete] How to use autocomplete (multiple) with an API? HOT 5
- [codemod] `v6.0.0/styled`, `v6.0.0/sx-prop`, `v6.0.0/theme-v6` codemods fail parsing tokens HOT 2
- [codemod] `v6.0.0/sx-prop` produces strange changes HOT 2
- [material-ui][Popover] How to create a hover card using a popover? HOT 3
- aria-hidden warning HOT 3
- I hope to use storybook MUI to create the new UI library, but the themes from material ui and joy ui can not work together, help me please. HOT 3
- Box modules is broken HOT 1
- Temporary drawer changes content and header width when open in an iframe
- Joy UI: Disabled Link IconButton appearance appears to still be enabled HOT 5
- [joy-ui][Select] Option flickers for multiple and controlled Select
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.