score:1
Accepted answer
v5
approach 1: use sx
prop to style nested component. see a list of global css class names here.
<chip
label="chip filled"
variant="outlined"
sx={{
"& .muichip-label": {
color: "red"
}
}}
/>
approach 2: pass a styled label:
<chip
label={<box sx={{ color: "blue" }}>chip filled</box>}
variant="outlined"
/>
v4
you need to target the label component inside chip
, you can do that by providing a class name to the classes.label
prop:
<chip
classes={{
label: classes.label
}}
the label
prop of chip
is a reactnode
so you can also provide a customized label component to the chip
:
<chip
label={<div classname={classes.label}>deletable</div>}
Source: stackoverflow.com
Related Query
- How to override the label styles in MUI's Chip
- How to override styles for material-ui TextField component without using the MUIThemeProvider?
- How to change the .MuisvgIcon-root class styles to override new styles from library in material-ui react?
- I try to override materialUI inbuilt classes using CSS file, styles are applying all the components in React how to stop overriding styles globally?
- How to override the width of a TextField component with react MUI?
- How do I avoid the warning: chunk styles [mini-css-extract-plugin] Conflicting order in GatsbyJS?
- How to override (overwrite) classes and styles in material-ui (React)
- How to import styles in the right order in webpack
- material UI - How can I change the font size of the label in FormControlLabel
- How to use typescript with the definition of custom styles for a select using react-select
- How to left align the label in a button
- How can I change the label size of a material ui TextField?
- How can I imitate the look of the outline and label from Material-UI's outlined textfield?
- How can I override the style of the Material-UI switch component when checked?
- How can I change the styles of the react-toastify popup message?
- How to override style of nested Material UI component from the ancestors?
- How to change the styles of ListItem element with the "onclick" event?
- How to override the "MuiPaper-elevation1" atrribute in a Card component in Material-UI?
- How can I pass CSS classes to React children and ensure they will override the child’s local class?
- Using D3.js (v4) and React.js How do I label the axis on a simple line chart?
- How to get the label in the material-ui text field to the right?
- How to change material-ui Textfield label styles in react
- How can I contain the styles of a Chrome Extension content script?
- How to change the label color of Material-UI <TextField/>
- How override the AMP URL mode from Next.js
- How to override material ui shadows in the theme
- How to override FormHelperText styles in React Material-UI?
- How to override React Component styles with styled components?
- How to override global border color styles for disabled Material UI TextField?
- How to access name in the pie chart label using recharts?
More Query from same tag
- Can I update an external state inside a reducer hook?
- create-react-app build removing css min function
- React wait for data fetch and then render
- Invoke Method in React Component after completion of API call in react redux saga
- How would I use Promises to fix this issue of synchronization in React?
- React - using classNames with imported css
- Issue with Varnish
- What is the best way for connecting Django models choice fields with React js select options
- ReactJS - Issue about routing components
- Uncaught Invariant Violation: Objects are not valid as a React child
- Setting up a twitter button return [object Object] instead of the value
- Link going to last scroll position instead of anchor
- My question is about material-ui 4, material-ui/pickers compaining of inexistent "mask" property
- How to create a Micro Frontend bundle with Webpack that shares libraries with the container application?
- Enable css module in react 16.7
- Browser Crashes when uploading large files even after slicing on XMLHttpRequest (JavaScript/ReactJS)
- react : NPM install fails
- BrowserHistory not working for react-router
- React how to disable submit button until form values are input
- useSWR doesn't work with async fetcher function
- Add a comment without refreshing the page: useEffect used as componentDidUpdate in functional components
- How to create custom attr name with styled component?
- How to keep a button highlited (ReactJS)?
- Is there any way to stop on hydration React App in Cypress?
- Typescript can't force generic to be passed
- Getting window is not defined on ReactJs
- Type for React useRef targeting a scroll
- How to fetch data by existing redux action with hooks?
- React - how to use the lifecycle methods
- React navigation event listeners being called multiple times