Can somebody help me how to change the css property of mui icons so that i can assign a perticular color when the icon is on focus...I have used the icons in header and am rendering specific pages under them so for differentiating which page is currently active i want to assign different color on focus.
Here is my code-
<PeopleOutlineIcon onClick={()=>navigate('/dashboard/candidates')}
sx={{
color:"black",
fontSize: 40,
cursor: "pointer",
"& :focus": {color:"blue"}
}}
/>
I think this codesandbox will be useful to you.
You should use the 'IconButton' component from MUI to wrap the Icon. And apply the styles in the IconButton to make it work on focus.
Basically, the property is called '&.Mui-focusVisible'.
First, you don't need to add & to access pseudo-classes of the MUI icon. Second, I think :focus pseudo-class is mainly used for <input/> elements. What you are looking for is either :hover or :active.
You can try these classes this way
<PeopleOutlineIcon onClick={()=>navigate('/dashboard/candidates')}
sx={{
color:"black",
fontSize: 40,
cursor: "pointer",
":active": {color:"blue"},
":hover": {color:"blue"},
}}
/>
Related
I'm trying to style <Button/> components via extendTheme(). Core styles are doing fine, any colour, size, spacing changes are working perfectly. But I'm having trouble to style <Button/> component with any leftIcon/rightIcon property. Overall I need to update icon part of button, which margin-inline-start/margin-inline-end properties of Icons but it is not same as other multi-part components in Chakra-UI while we can see the "chakra-button__icon" class on elements.
You can add that in sx props like below.
<Button `sx={{ '.chakra-button__icon *': { color: 'red' } }}` `rightIcon={<ArrowForwardIcon />}`>Sign up`</Button>`
I am using Monaco Editor and want to change border-color when I focus to the Editor. When I focus -click- to the Editor, nothing changes. It works well on :hover event. I also added tabIndex but still doesn't work. You can see my code below:
<Editor
options={{ readOnly: !canEditEditor, tabIndex: 1 }}
height="20vh"
defaultLanguage="json"
defaultValue={formatJSON(JSON.stringify(documentInfo))}
onChange={(value, event) => handleChange(value, event)}
onValidate={handleValidation}
className={styles['Editor-container']}
/>
Is there a way to change :focus style for Monaco Editor?
I found the answer
I removed tabIndex on Editor and :focus on style. I used :focus-within instead of using :focus. And it's working well for me.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
I'm looking for a way to customize the color/width of the connector line in Ant Designs Steps component:
I've tried looking through the inspector but the connector doesn't appear as it's own element which means I can't style it through className.
Thanks in advance for any help.
You can override .ant-steps-item-title class to achieve this. For example:
.ant-steps-item-title:after {
background-color: red !important;
}
DEMO
You may decide to use sx attribute on Stepper:
<Stepper
sx={{
...
'& .MuiStepConnector-line.MuiStepConnector-lineHorizontal': {
borderColor: 'red',
},
}}
/>
That way you avoid to user !important that isn't recommended.
Same way you may use another attributes like width and color.
I'm trying to utilize the Autocomplete component from React Material-UI in my Website and I've already managed to customize the appearance of the List-Elements to display with a dark background, as you can see in this image:
The problem is that I cannot figure out how to style the group-labels of this list. In this project, I have to use class-components so I cannot use a solution that uses React-Hooks. I guess I could somehow achieve it by overriding the CSS of this Component, but I can't figure out how.
I already tried solving this by using the createMuiTheme() function and overriding the MuiListSubheader styling, but sadly this also didn't work.
In the documentation I saw that the Autocomplete component has a "groupLabel" key within the "classes" prop, but for some reason I can only enter a string into this key.
I managed to style the list items by using the "PaperComponent" Prop of the Autocomplete component, but I couldn't find a similar solution for the list subheaders.
Thanks in advance for any help!
I managed to do it by passing a PopperComponent to the Autocomplete like so :
<Autocomplete PopperComponent={StyledPopper}></Autocomplete>
This StyledPopper is defined as such with MUI v5 styled components :
const StyledPopper = styled(Popper)(({ theme }) => ({
'& .MuiAutocomplete-groupLabel': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
},
}));
You can also style the paper in it with '& .MuiAutocomplete-paper'
Essentially, I want to maintain the style of my input fields with that of a react-select component. I've learned that styled-components would be the best course of action, but am still not sure which styles to change to get my desired result. I'd like to remove the border, focus glow, and make it inline, while maintaining everything else. Would I make changes to .Select-menu-outer?
Here is an example of one of my custom input fields
Here is my css style
You can check out the documentation for react-select to do styling to its components.
const customStyles = {
container: base => {(
...base,
backgroundColor: {/* Your color */}
)},
option: base => {(
...base,
backgroundColor: {/* Your color */}
)}
}
<Select styles={customStyles} />
You can style many components of react-select by that. You just need to target the right component and you can even use states with that.