I have this btn with an icon insdie of it i click for a long time it created and undesiered effect around the icon any clue how to remove this action ?
import React from "react";
import ReactDOM from "react-dom";
import Button from "#material-ui/core/Button";
import ViewListIcon from "#material-ui/icons/ViewList";
function App() {
return (
<div>
<Button style={{ MuiButtonBase: { disableRipple: true } }}>
<ViewListIcon />
</Button>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
CodeSandbox
Add disableRipple prop to Button
<Button disableRipple>
<ViewListIcon />
</Button>
According to docs, the prop disableRipple on MUI Buttons, such as Button or IconButton disable ripple effect.
<Button disableRipple>
<ViewListIcon />
</Button>
By default, a ripple is activated when the host element of the matRipple directive receives mouse or touch events. Upon being pressed, a ripple will begin fading in from the point of contact, radiating to cover the host element. Each ripple will fade out only upon release of the mouse or touch.
Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.
Read more about this here: Ripple.
Related
I'm trying to deactivate the pointer-events on an material-ui Edit-Icon.
(My goal is that 'the hand' dissappears when hovering over the icon.)
import EditIcon from '#material-ui/icons/Create';
import { Button} from 'react-admin';
<Button
label="Edit" startIcon={<EditIcon style={{pointerEvents:'none'}}/>}></Button>
I added inline-styling, but that did not help. Thanks!
For Mui v5+ using emotion style engine, the following would do it. For earlier versions, substitute sx for your styling engine.
import IconButton from '#mui/material/IconButton';
import EditIcon from "#mui/icons-material/Edit";
<IconButton sx={{ pointerEvents: "none", cursor: "not-allowed" }}>
<EditIcon />
</IconButton>
It is possible to put button in endAdornment in TextField, e.g. with code:
<TextField size="small" type="text" id="m_general_reference" value={this.props.invoice.general_reference}
InputProps={{
endAdornment: (
<InputAdornment>
<Button variant="outlined" size="small" style={{textTransform: 'none', height: '20px'}}>
Check General Reference
</Button>
</InputAdornment>
)
}} />
But this code does not work when TextField is changed to Input. Is there more or less standard markup to put endAdornment button in InputField? I am interested in more or less standard solution only and no hacks (in case of hacks I will go with TextField).
So I understand that I can do a button group like this, which is great.
However how can I make it so that when say button one is pressed that it looks like it as been selected? As all this does is a click effect?
Basically what I want to do is when a button is clicked it changes an input value to the value of the button. But I would like the button to look like it was selected.
<ButtonGroup disableElevation variant="contained" color="primary">
<Button>One</Button>
<Button>Two</Button>
</ButtonGroup>
I'd use state to keep track of the selected Button and utilize the color prop to assign the color. For arbitrary color, you can use the MUI ThemeProvider or makeStyles
function App() {
const [selectedBtn, setSelectedBtn] = React.useState(-1);
return(
<div>
<ButtonGroup disableElevation variant="contained" color="primary">
<Button color={selectedBtn === 1 ? "secondary" : "primary"} onClick={()=>setSelectedBtn(1)}>One</Button>
<Button color={selectedBtn === 2 ? "secondary" : "primary"} onClick={()=>setSelectedBtn(2)}>Two</Button>
</ButtonGroup>
</div>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { ButtonGroup, Button } = MaterialUI;
</script>
</body>
You can use Toggle Buttons - https://material-ui.com/components/toggle-button.
Combine that with the ToggleButtonGroup API and you should be good to go - https://material-ui.com/api/toggle-button-group/#togglebuttongroup-api.
Have this Chat component and inside an input have an en endorsement, inside that i want to have a popover to show and pick emojis, The pop over pops up but the closing functionality does not work.
import React from "react";
import "./styles.css";
import Chat from "./Chat";
export default function App() {
return (
<div className="App">
<Chat />
</div>
);
}
Here is a sandbox example of that.
https://codesandbox.io/embed/zealous-maxwell-3115b?fontsize=14&hidenavigation=1&theme=dark
<InputAdornment position="end">
<IconButton aria-describedby={id} onClick={handleEmojiClick}>
<EmojiEmotionsIcon />
</IconButton>
<PopOver
open={open}
id={id}
anchorEl={anchorEl}
setAnchorEl={setAnchorEl}
/>
<IconButton>
<SendIcon />
</IconButton>
</InputAdornment>
Just puted the Popover out of IconButton Component and it is working now.
const styles = {
bgColor:{
backgroudColor: '#f9a825'
}
}
<Button color='primary' classes={fab:classes.bgColor} variant="fab" aria-label="Checkout"> Click Here </Button>
Here, I want to change the background-color. its applying, but it giving priority to Theme css.
The classes prop is applied incorrectly.
You shouldn't even use classes since you don't seem to inject any; you should use style.
<Button color="primary"
style={styles.bgColor}
variant="fab"
aria-label="Checkout">
Click Here
</Button>
If you indeed inject classes into you component, you use it like this:
<Button color="primary"
classes={{ fab: classes.bgColor }}
variant="fab"
aria-label="Checkout">
Click Here
</Button>