I try to apply css like below example
<CustomColorIconButton>
<DeleteForeverIcon />
</CustomColorIconButton>
const CustomColorIconButton = withStyles({
root: {
color: "#ff8833",
outline: 'none',
}
})(IconButton);
this is also i try
<IconButton classes={{outline: 'none'}} >
<DeleteForeverIcon />
</IconButton>
Unless there is some other setting for styling this button, like in theme config file, setting the outline to 0 should fix this problem: outline: 0,
You should also try to see if there is somewhere else in your project some setting for buttons in general where outline is set to some other value than the one that you want. It could be that that setting is somehow overriding this one that you are using.
Also, you can try with setting the value of this parameter as !important
Related
I am using MUI for UI.
I have some options, given in image below:
It is perfect till now. But I want to move options container to more bottom. (Currently it is set as top: 64px which is default).
I want to set it as top : 100px. After setting, it will look like :
I have tried to achieve this, but css didn't apply.
const useStyles = makeStyles((theme) => ({
userAge: {
"& .Mui-focused": {
"body .MuiPaper-root": {
top: "100px !important" // 64px is default
}
}
}
}));
//jsx return
<FormControl fullWidth className={classes.userAge}>
// more code here
</FormControl>
You can also try here : https://codesandbox.io/s/funny-shannon-h6flch?file=/demo.tsx
Note :
I don't want to set top : 100px globally.
Made some changes to your codesandbox. Hope it helps ;)
Styles need to be applied to menu via MenuProps and then applying class based styles to paper
https://codesandbox.io/s/change-the-default-position-of-options-in-mui-stackoverflow-lm9mxn?file=/demo.tsx
According to my research I can change the style of ANT components using the "style" prop (Even though that's not exactly in the docs of the Spin component)
Here's my attempt:
<Col>
{userCompaniesLoading ? (
<Spin style={{ color: 'white' }} />
) : (
<UserOutlined
onClick={() => {
setDrawerVisibility(!isDrawerVisible);
}}
/>
)}
</Col>
On inspect, each dot of the Spin is a "<i class="ant-spin-dot-item"></i>", and the color property does not work. So, how can I change the color of the Spin component?
You can set the Spin Component Color by adapting the background-color of the ant-spin-dot-item in your component css file.
.ant-spin-dot-item {
background-color: red;
}
Here is a CodeSandBox demo with a changed index.css.
Btw. a more robust and production ready way to adapt antd style is to create a custom theme.
Using a customized Webpack config works good in my project.
Also if you want to change the color of the tip you need to change this class:
.ant-spin-text {
color: #999; }
Looks like before tip class was .ant-spin-tip, but that didn't work for me.
Just sharing this in case it helps someone :D
I am trying to remove the button outline when a button is clicked in React Bootstrap. I managed to remove the outline by using:
.btn:focus, .btn:active {
box-shadow: none;
}
however this didn't fix the active state, if the button is held down the outline is still visible. I also tried this fix:
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
box-shadow: none;
outline: none;
}
The result is the same, the border still appears when the button is held down. Is there anything I can do to remove this?
I recommend not doing this. CSS outlines on hover and focus tend to help with accessibility. See the following post: Quick tip: Never remove CSS outlines
.
Removing outlines in CSS creates issues for people navigating the web with a keyboard. Using the CSS rule :focus { outline: none; } to remove an outline on an object causes the link or control to be focusable, but removes any visible indication of focus for keyboard users. Methods to remove it such as onfocus="blur()" result in keyboard users being unable to interact with the link or control.
The article provides a few options for handling this issue in a more accessibility-friendly way:
Style the outline
Style the element itself
Move outlines for mouse users only, if you truly must do so
The question is how to do accomplish. Attempting to answer the question ...
I did so within the component itself. I wanted the same thing for a button group that mashed the buttons altogether, which I did not like. Adding a style = { boxShadow: 'none' } in the component itself, did the trick for me.
Also, I wanted my grouped button separated (mr-1) and with rounded corners (borderRadius).
<ButtonGroup>
{stuffBtnList.map((value, index) => (
<Button
key={index}
variant='primary'
size='sm'
className='mr-1'
style = {{ borderRadius: '.2rem', boxShadow: 'none' }}
onClick={() => setStuff(value)}
>
{value}
</Button>
))}
<DropdownButton
title='Other'
size='sm'
variant='success'
onSelect={(e) => setStuff(e)}
>
other.map((value, index) => (
<Dropdown.Item key={index} eventKey={value}>
{value}
</Dropdown.Item>
))}
</DropdownButton>
</ButtonGroup>
I've successfully implemented the Semantic UI React Dropdown like this:
<div>
<Form.Label>Search and Select Company</Form.Label>
<Dropdown
name='company'
data-testid='companiesDropdown'
placeholder='Ex. Goodyear'
className={classes.errorState}
fluid
search
searchInput={{autoFocus: true}}
selection
options={companies
? companies.map((company, key) => {
return (
{key: key, value: company.company_id, text: company.company_name}
)})
: null}
value={(companyId > 0) ? companyId: null}
onChange={handleDropdownChange}
/>
{determineErrorMessage('companyId')}
</div>
Now I'd like to change the border color if the element is in an error state such as the user hasn't picked an item yet. To do this with any other HTML element, I can just set the className but it doesn't seem to work with this element.
In the example above, I'm just hardcoding the className={classes.errorState} where errorState: { borderColor: 'red' } but doing so doesn't work.
Any ideas on how to get this working properly?
P.S. As a temporary fix I added a <div> wrapper around it which kind of works except you can clearly see the border of the <div> and the border of the <Dropdown> element.
HI i reworked the semantic example for you
As it's a div and not a true HTML list try it like this
CSS
.dropdownRed {
border: 1px solid red !important;
}
JSX
<Dropdown.Menu className={errClass}>
Link to working codesandbox demo
I'm using react and material-ui and I have come across an issue, I want to define some css behavior for the drawer component, and I have read that it is quite simple, that all I have to do is use the className property, but for some reason it doesn't work.
Here is my css:
.drawer {
width: 200px
}
.drawer:hover {
background-color: black
}
Here is my usage of the drawer:
<Drawer open={this.state.isLeftNavOpen}
docked={false}
className='drawer'
onRequestChange={this.changeNavState}>
<MenuItem primaryText='Men'
onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: MEN}})}/>
<MenuItem primaryText='Women'
onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: WOMEN}})}/>
<MenuItem primaryText='Kids'
onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: KIDS}})}/>
</Drawer>
I tried wrapping the Drawer with div but still no success.
Any idea what I'm doing wrong?
The library does seem to be adding the className, but this issue you are seeing seems to be a consequence of material-ui setting styles directly on the element, which take priority over those on the class you've added. There are a couple of options until the library makes some changes/fixes, such as:
1) set the width and styles inline with the style and/or width properties: (fiddle)
<Drawer open={this.state.isLeftNavOpen}
docked={false}
width={200}
style={{'background-color': 'black'}}
className='drawer'>
Unfortunately this approach doesn't allow for :hover styling though, and their current inline styling solution is likely to be changed in the near future (see issue 1951 and those that follow it). That means that your only real solution at the moment to this specific problem is to:
2) mark the styles in the css as !important to override those set on the element by the library: (fiddle)
.drawer {
width: 200px !important;
}
.drawer:hover {
background-color: black !important;
}
You can also use a combination of the two, passing the width as a prop and only having the hover background style be !important.
(Using LeftNav (the older version of Drawer) in the fiddles because it's in the easiest-to-consume package I could find at time of writing for material-ui, found it on this comment).