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>
Related
like in mui components make an asterisk before the text?
The documentation doesn't say anything about it.
https://mui.com/material-ui/react-text-field/
The documentation makes it very clear under Input Adornments. You can put whatever you want in the beginning or end of the text field using input adornments.
Sample code:
import * as React from 'react';
import Box from '#mui/material/Box';
import InputAdornment from '#mui/material/InputAdornment';
import TextField from '#mui/material/TextField';
export default function InputAdornments() {
return (
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<div>
<TextField
id="outlined-start-adornment"
sx={{ m: 1, width: '25ch' }}
InputProps={{
startAdornment: <InputAdornment position="start">*</InputAdornment>,
}}
/>
</div>
</Box>
);
}
I am trying to render a dropdown using #mui/material/Select and want the top border to extend next to the label. Right now there is white space between the label and the right edge of the dropdown div. I checked dev tools and the only border property I could identify was border-radius. Is there a way to make the border extend up next to edge of the label ?
Rendered Dropdown
YearDropdown.js
import React from 'react';
import InputLabel from '#mui/material/InputLabel';
import MenuItem from '#mui/material/MenuItem';
import FormControl from '#mui/material/FormControl';
import Select from '#mui/material/Select';
import styled from 'styled-components';
import { BEM_Date } from 'containerMfe/Functions';
const Form = styled(FormControl)`
width: 80px;
margin-bottom: 15px!important;
& > div > div {
padding: 10px;
}
`
export default function YearDropdown({ columns, yr, handler }) {
const years = [...new Set(columns.map(date => BEM_Date(date).getFullYear()))]
return (
<React.Fragment>
<Form>
<InputLabel id='year-dropdown-label'>Year</InputLabel>
<Select
fullWidth
labelId='year-dropdown-label'
id='year-dropdown'
value={yr}
onChange={handler}
>
{years.map(year => <MenuItem key={'year-' + year} value={year}>{year}</MenuItem>)}
</Select>
</Form>
</React.Fragment>
)
}
I ran into the same issue and could not solve it. In my case, not setting a value or default value seemed to fix the label issue, but my input had to be controlled.
What did work was using the TextField component, with the select prop set to true with InputLabelProps={{ shrink: true }}.
Here is my original Select whose label I could not fix, followed by an equivalent TextField example that works:
// original select implementation with broken label
<FormControl fullWidth>
<InputLabel id="sort-by-label">Sort By</InputLabel>
<Select
label="sort-by-label"
labelId="sort-by-label"
id="sort-by"
value={sortBy}
onChange={handleSortByChange}
variant="outlined"
>
{keys.map((key) => (
<MenuItem key={key} value={key}>
{key}
</MenuItem>
))}
</Select>
</FormControl>
// equivalent TextField implementation that seems to have a functional label
<TextField
select
value={sortBy}
onChange={handleSortByChange}
variant="outlined"
label="Sort By"
InputLabelProps={{ shrink: true }}
>
{keys.map((key) => (
<MenuItem key={key} value={key}>
{key}
</MenuItem>
))}
</TextField>
MUI Desktop Date picker is not showing after deployment in the server.I have used mui/lab/DatePicker but now in MUI documentation now it says
import { AdapterDateFns } from '#mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from
'#mui/x-date-pickers/LocalizationProvider';
I have also used this,but after using this it is showing localeText is undefined.
enter code here
import AdapterDateFns from "#mui/lab/AdapterDateFns";
import DatePicker from "#mui/lab/DatePicker";
import LocalizationProvider from "#mui/lab/LocalizationProvider";
<LocalizationProvider
dateAdapter={AdapterDateFns}
>
<DatePicker
label="জন্ম তারিখ"
name="birthDate"
value={x.birthDate}
disabled={grantorDisabled[i].disableGrantor}
onChange={(e) => handleDateChangeEx(e, i)}
renderInput={(params) => (
<TextField
{...params}
fullWidth
size="small"
style={{ backgroundColor: "#FFF" }}
/>
)}
/>
</LocalizationProvider>
import { AdapterDateFns } from '#mui/x-date-pickers/AdapterDateFns';
import { DateTimePicker, DatePicker, LocalizationProvider } from '#mui/x-date-pickers';
import datepickers and adapter from x-date-pickers now, earlier they were in /labs
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.
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.