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>
);
}
Related
I am trying to create a Dropdown which will have Menu items which would be, on hovered, deletable. I would like to insert an Icon as a children of my Menu Items, but when trying to render it with Storybook, I am getting an error : "Couldn't find story matching 'components-forms-buttons-newdropdown--new-dropdown'."
If I simply comment the Icon component, it's working fine.
Example :
<Box sx={sx} style={{ display: 'inline-block', position: 'relative' }}>
<Box
sx={{
cursor: disabled ? 'not-allowed' : undefined,
display: 'inline-block',
borderRadius: '15px',
}}
>
<StyledMuiButton
variant="outlined"
isdisabled={isdisabled}
onClick={handleClick}
endIcon={<KeyboardArrowDownIcon />}
>
<Typography variant="body1">
{defaultValue ? `${label} :` : label}
</Typography>
<Typography variant="h4">{activeOption}</Typography>
</StyledMuiButton>
</Box>
<StyledMenuContainer
isClicked={isClicked ? 1 : 0}
maxHeight={maxHeight}
>
{options?.map(option => {
return (
<StyledMenuItem
key={option.label}
value={option.value}
divider={option.divider}
disabled={option.disabled}
className={option.className}
onClick={() => handleOptionClick(option)}
>
<ListItemIcon>
{/* When uncommenting this, storybook trhows an error */}
{/* <Delete /> */}
</ListItemIcon>
<ListItemText
sx={{ color: 'grey.160' }}
primary={option.label}
/>
</StyledMenuItem>
);
})}
</StyledMenuContainer>
</Box>
I imported the Icon from MUI.
I do not get why it's not working, as I took inspiration from the documentation.
I upgraded my dependencies so it should not be related to MUI version.
storybook render
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>
I am trying to use react-hook-form to simply generate some data from two material UI text fields and display the data in the console, but the when clicking the submit button I cannot see anything in the console.log, this is the code:
import React from 'react';
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
import { makeStyles } from '#material-ui/core/styles';
import { useForm } from 'react-hook-form';
const useStyles = makeStyles({
container: {
margin: '1rem',
'& .MuiTextField-root': {
margin: '1rem 0',
},
},
});
const GuestJoiningForm = () => {
const { register, handleSubmit } = useForm()
const onSubmit = (data) => {
console.log(data);
};
const classes = useStyles();
return (
<form onSubmit={handleSubmit(onSubmit)} className={classes.container}>
<TextField
ref={register}
label="Name"
name="name"
variant="outlined"
fullWidth/>
<TextField
ref={register}
multiline rows={3}
label="Content"
name="content"
variant="outlined"
fullWidth/>
<Button
color="primary"
variant="contained">Submit</Button>
</form>
)
};
export default GuestJoiningForm;
When I enter data into the text fields and hit the submit button, nothing happens and I would expect to see an object of the data I enter. I don't imagine its the console I'm using, but it's in Safari and the only thing I've noticed is something that says [HMR] Waiting for update signal from WDS...
Not sure if that has anything to do with it, but would really appreciate any help on this issue if you get time, thank you.
Last thing to add! I added a type={'submit'} to the button, and the console responded with empty {}, which even though didn't fix the issue I guess proves that the console is working
You need to add type attribute as submit in the Submit button.
<Button type="submit" color="primary" variant="contained">
Submit
</Button>;
You need to add inputRef prop for both the TextField components like this
<TextField
ref={register}
inputRef={register}
label="Name"
name="name"
variant="outlined"
fullWidth
/>
<TextField
ref={register}
multiline
rows={3}
inputRef={register}
label="Content"
name="content"
variant="outlined"
fullWidth
/>
Here's a sandbox for your form.
Using Intersection Observer API I'm trying to render a Material-UI Component by visibility on the viewport.
export default function Index() {
const [onScreen, theRef] = useOnScreen({
rootMargin: "-300px",
ssr: true
});
const classes = useStyles();
return (
<Container maxWidth="sm">
<DummyContainer />
<div
ref={theRef}
style={{
height: "100vh",
padding: "20px",
backgroundColor: "green",
transition: "all .5s ease-in"
}}
>
{onScreen && (
<Box className={classes.rootBox} my={16}>
<Typography variant="h2" gutterBottom>
Content Lazy using Intersection Observer
</Typography>
<Copyright />
</Box>
)}
</div>
<Box className={classes.rootBox} my={4}>
<Typography variant="h2" gutterBottom>
Content no lazy, why this Box loses margin?
</Typography>
<Typography gutterBottom>
If you request this page with JavaScript disabled, you will notice
that has been properly rendered in SSR
</Typography>
</Box>
</Container>
);
}
Basic stuff, onScreen is a toggled boolean using Intersection Observer
In order to be "SEO friendly" I'm using NextJS and I wanted this component to always be visible in SSR and conditional visible in CSR.
The problem arises during rehydration in CSR, it's seems that some classnames after the lazy component are recreated and I'm losing styling in second Box component.
I've created this CodeSandbox to have a look : https://codesandbox.io/s/nextjsmaterialuiclassnamemismatch-1j4oi
Is this a bug in MaterialUI, JSS? Or most probably I'm doing something wrong?
I have this code:
import React from 'react';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import ArrowForwardIos from '#material-ui/icons/ArrowForwardIos';
import ListSubheader from '#material-ui/core/ListSubheader';
import Switch from '#material-ui/core/Switch';
import TextField from '#material-ui/core/TextField';
import ListItemAvatar from '#material-ui/core/ListItemAvatar';
import Avatar from '#material-ui/core/Avatar';
import FolderIcon from '#material-ui/icons/Folder';
import ListItemSecondaryAction from '#material-ui/core/ListItemSecondaryAction';
import DeleteIcon from '#material-ui/icons/Delete';
import IconButton from '#material-ui/core/IconButton';
function App() {
return (
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Single-line item"
secondary="Secondary text"
/>
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
);
}
export default App;
"Single-line item" and "Secondary text" is vertically aligned, but I need align it horizontally. Do you have any idea how to do it?
Instead of left I need rendering on the right here:
https://gitlab.com/j4nos/tableitem/blob/master/src/App.js
How? :)
I managed to get the desired output using a few other elements and referring the material-ui documentation. here is a working example: https://codesandbox.io/s/sweet-bose-4e26h
function App() {
return (
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<Box
textAlign="right"
style={{ paddingRight: 5 }}
>
Single-line item
</Box>
<ListItemText
secondaryTypographyProps={{ align: "left" }}
secondary="Secondary text"
/>
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
);
}
Alternative using Material-UI's built-in overrides on ListItemText.classes.root as seen below:
<ListItem className={classes.listItem}>
<ListItemText
classes={{ root: classes.listItemRootOverride }}
className={classes.listText}
primary={`${tc('Foo')}:`}
/>
<ListItemText
classes={{ root: classes.listItemRootOverride }}
secondary={bars}
/>
</ListItem>
Classes in useStyles:
listItemRootOverride: { /* this is the important one */
flex: 'none',
paddingRight: 4
},
listItem: {
padding: theme.spacing(0)
},
listText: {
color: theme.palette.common.black,
paddingRight: theme.spacing(2)
}
Example output (disregard minor alignment issue):