By default the helperText "Some important text" is not aligned to the far left. How can it be done?
You can use makeStyles for your css and then apply your generated styles to the className prop inside of the FormHelperTextProps prop from TextField.
import React from "react";
import { TextField } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
helperText: {
marginLeft: 0
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<TextField
FormHelperTextProps={{
className: classes.helperText
}}
label="Test"
helperText="Helper text..."
variant="outlined"
/>
</div>
);
}
Live demo:
Related
If we have a legacy MUI snippet like this:
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
import Hidden from '#material-ui/core/Hidden';
import Typography from '#material-ui/core/Typography';
const styles = theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary
}
});
const ColumnDirection = withStyles(styles)(({ classes }) => (
<div className={classes.root}>
<Grid container justify="space-around" spacing={4}>
<Grid item xs={3}>
<Grid container direction="column" spacing={2}>
How do we realize the same functionality in mui v5?
I am trying to implement tailwindcss styles into Formik to style forms. But the styles declared through className are not being applied?
I think Formik is using classname to define input type and tailwind uses the same method to declare styles?
my form page:
import React from "react";
import * as yup from "yup"
import { Formik, Form } from 'formik'
import { MyTextInput } from "../components/FormParts";
let mainFormSchema = yup.object().shape({
name: yup.string().trim().required()
})
const tryMainForm = () => {
const initValues = {
name: ''
}
return (
<div>
<h1>Any place in your app!</h1>
<Formik
initialValues={initValues}
validationSchema={mainFormSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<MyTextInput
label="name"
name="name"
type="text"
placeholder="name"
/>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
</div>
)
}
export default tryMainForm
formpart component:
import { useField } from "formik";
export const MyTextInput = ({ label, ...props }) => {
const [field, meta] = useField(props)
return (
<>
<label htmlFor={props.id || props.name} className="block text-sm font-medium text-gray-700">{label}</label>
<input className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" {...field} {...props} />
{meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
) : null}
</>
)
}
can you suggest a way to deal with this?
tailwind applies styles properly to label but doesn't with input?
New to Material UI I'm trying to create a sticky div with a set width similar to how Material UI has their side nav on the right of their docs. For some reason I'm unable to get the div to stick. Per research and the docs I've read through several questions and here are my attempts:
Attempt 1
I tried utilizing Box but it scrolls with the page:
import React from 'react'
import { Hidden, Box, List,ListItem } from '#material-ui/core/'
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles(theme => ({
box: {
background: 'red',
position: 'sticky',
top: 70,
bottom: 20,
paddingTop: 100,
marginTop: theme.spacing(2),
width: 300,
},
sub: {
display: 'block',
overflow: 'auto',
},
}))
const SideToc = ({ nav }) => {
const { box, sub } = useStyles()
return (
<>
<Hidden smDown>
<Box className={box}>
Contents
<List className={sub} component="nav" aria-label="main mailbox folders">
<ListItem button>Monday</ListItem>
<ListItem button>Tuesday</ListItem>
<ListItem button>Wednesday</ListItem>
</List>
</Box>
</Hidden>
</>
)
}
export default SideToc
Attempt 2
after research I've found a few mentions of Drawer but when I deploy the below component my green drawerPaper is fixed to the left and my blue Drawer is to the right a correct width.
import React from 'react'
import Drawer from '#material-ui/core/Drawer'
import Hidden from '#material-ui/core/Hidden'
import List from '#material-ui/core/List'
import ListItem from '#material-ui/core/ListItem'
import { makeStyles } from '#material-ui/core/styles'
const SideToc = ({ nav }) => {
const useStyles = makeStyles(theme => ({
toolbar: theme.mixins.toolbar, // necessary for content to be below app bar
drawer: {
background: 'blue',
width: 300,
flexShrink: 0,
},
drawerPaper: {
marginTop: 120,
background: 'green',
},
}))
const { toolbar, drawer, drawerPaper } = useStyles()
return (
<>
<div className={toolbar} />
<Hidden smDown>
<nav className={drawer} aria-label="mailbox folders">
<Drawer
classes={{
paper: drawerPaper,
}}
variant="permanent"
>
Contents
<List component="nav" aria-label="main mailbox folders">
<ListItem button>Monday</ListItem>
<ListItem button>Tuesday</ListItem>
<ListItem button>Wednesday</ListItem>
</List>
</Drawer>
</nav>
</Hidden>
</>
)
}
export default SideToc
Here is my parent component that has the content with the set width nav:
import React from 'react'
import { makeStyles } from '#material-ui/core/styles'
// Components
import SideToc from './SideToc'
const useStyles = makeStyles(theme => ({
toolbar: theme.mixins.toolbar, // necessary for content to be below app bar
content: {
flexGrow: 1,
padding: theme.spacing(3),
overflow: 'hidden',
background: 'orange',
},
}))
const Parent = ({ nav, children }) => {
const { content, toolbar } = useStyles()
return (
<>
<main className={content}>
<div className={toolbar} />
{children}
</main>
<SideToc className={toolbar} nav={nav} />
</>
)
}
export default Parent
Research
How to make a Material UI grid element sticky?
Reactjs Material-ui hide appBar sticky or static
Make a React Material-UI component to stick to the bottom-right of the screen
React Material-Ui Sticky Table Header with Dynamic Height
In Material UI if I want a div to be sticky that will not scroll and have a fixed width how should that be done? Is my issue due to my parent? Should I be using Material's Grid in this approach?
Edit
After further testing I am able to get the side nav to stick but the content, if outside the viewport, will not allow scrolling. The parent component has been modified with just a div surrounding the SideToc component:
<>
<main className={content}>
<div className={toolbar} />
{children}
</main>
<div>
<SideToc toc={toc} />
</div>
</>
SideToc Component:
import React from 'react'
import { Hidden, Box, List, ListItem } from '#material-ui/core/'
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles(theme => ({
box: {
marginTop: theme.spacing(8),
top: theme.spacing(8),
width: 250,
position: 'sticky',
right: 0,
overflowY: 'auto',
flexShrink: 0,
},
}))
const SideToc = ({ nav }) => {
const { box } = useStyles()
return (
<>
<Hidden smDown>
<Box className={box} component="nav">
Contents
<List component="nav">
<ListItem button>Monday</ListItem>
<ListItem button>Tuesday</ListItem>
<ListItem button>Wednesday</ListItem>
</List>
</Box>
</Hidden>
</>
)
}
export default SideToc
Per request:
I'm using v1.1.0 of material-ui in React 16.3.2. I'm trying to create a landing page similar to Showcase - Local Insights
where the dialog has opacity (Find foreclosures). I'm trying to use PaperProps for Dialog component described here Dialog doc
Here's a component I've created to try to do this.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogTitle from '#material-ui/core/DialogTitle';
import ForwardIcon from '#material-ui/icons/Forward';
import Input from '#material-ui/core/Input';
import FormControl from '#material-ui/core/FormControl';
import Slide from '#material-ui/core/Slide';
const styles = theme => ({
dialogPaper: {
opacity: 0.5,
border: '#FF0000 1px solid',
},
button: {
margin: '30px'
}
});
function Transition(props) {
return <Slide direction="up" {...props} />;
}
class SignInDialog extends React.Component {
state = {
open: false,
username: ''
};
handleClickOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
handleChange = name => event => {
this.setState({
[name]: event.target.value,
});
};
render() {
const { classes } = this.props;
return (
<div>
<Button variant="fab" color="primary" aria-label="add" className={classes.button} onClick={this.handleClickOpen}>
<ForwardIcon />
</Button>
<Dialog
PaperProps={styles.dialogPaper}
open={this.state.open}
TransitionComponent={Transition}
onClose={this.handleClose}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">WELCOME</DialogTitle>
<DialogContent>
<p>SIGN IN</p>
<FormControl className={classes.formControl}>
<Input
value={this.state.searchString}
onChange={this.handleChange('search')}
id="siginin-input"
placeholder="Enter your username"
/>
</FormControl>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Cancel
</Button>
<Button onClick={this.handleClose} color="primary">
Continue
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
SignInDialog.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SignInDialog);
I haven't been able to figure out how to get the Dialog to take the styles. What is needed to get PaperProps to work?
If you want to use PaperProps you have to specify the props of the Paperfor which you are applying style.
<Dialog
PaperProps={{ classes: {root: classes.dialogPaper } }}
/>
You can also use classes property and override the style
<Dialog
classes={{paper:classes.dialogPaper}}
/>
The correct way to overide paper props is by using classNames
<Dialog
PaperProps={{ className: classNames(classes.dialogPaper) }}/>
<Dialog
PaperProps={{ classes: {root: classes.dialogPaper } }}
/>
Currently for pre 1.0.0 releases Material-UI does not allow text selection on RadioButton and Checkbox control labels.
How can I override this behavior? Apparently passing labelStyle={{ userSelect: 'all' }} to the component doesn't help.
What I'm trying to achieve is being able to highlight the text in the option label as per this screenshot:
You need to override the CSS class that prevents selection of the labels.
The labels are made with components of type FormControlLabel. At the bottom of the doc page for that component, you can see that the CSS label class is available to override.
So, you need to override the label class on each FormControlLabel like this:
// Define the overriding style
const styles = () => ({
selectableLabel: {
userSelect: 'all',
},
});
// Override the label CSS that prevents selection
<FormControlLabel classes={{ label: classes.selectableLabel }} value="male" control={<Radio />} label="Male" />
Here's full code for a group of selectable radio buttons (derived from the Radio buttons example in the docs:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Radio, { RadioGroup } from 'material-ui/Radio';
import { FormLabel, FormControl, FormControlLabel } from 'material-ui/Form';
const styles = theme => ({
root: {
display: 'flex',
},
formControl: {
margin: theme.spacing.unit * 3,
},
group: {
margin: `${theme.spacing.unit}px 0`,
},
selectableLabel: {
userSelect: 'all',
},
});
class RadioButtonsGroup extends React.Component {
state = {
value: '',
};
handleChange = (event, value) => {
this.setState({ value });
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<FormControl component="fieldset" required className={classes.formControl}>
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup
aria-label="gender"
name="gender1"
className={classes.group}
value={this.state.value}
onChange={this.handleChange}
>
<FormControlLabel classes={{ label: classes.selectableLabel }} value="male" control={<Radio />} label="Male" />
<FormControlLabel classes={{ label: classes.selectableLabel }} value="female" control={<Radio />} label="Female" />
<FormControlLabel classes={{ label: classes.selectableLabel }} value="other" control={<Radio />} label="Other" />
<FormControlLabel classes={{ label: classes.selectableLabel }} value="disabled" disabled control={<Radio />} label="Disabled" />
</RadioGroup>
</FormControl>
</div>
);
}
}
RadioButtonsGroup.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(RadioButtonsGroup);
And here's the full code for the Checkbox buttons (derived from the Checkboxes example in the doc):
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { FormControl, FormGroup, FormControlLabel } from 'material-ui/Form';
import Checkbox from 'material-ui/Checkbox';
const styles = {
selectableLabel: {
userSelect: 'all',
},
};
class CheckboxesGroup extends React.Component {
state = {
gilad: true,
jason: false,
antoine: true,
};
handleChange = name => (event, checked) => {
this.setState({ [name]: checked });
};
render() {
const { classes } = this.props;
return (
<FormControl component="fieldset">
<FormGroup>
<FormControlLabel
classes={{ label: classes.selectableLabel }}
control={
<Checkbox
checked={this.state.gilad}
onChange={this.handleChange('gilad')}
value="gilad"
/>
}
label="Gilad Gray"
/>
<FormControlLabel
classes={{ label: classes.selectableLabel }}
control={
<Checkbox
checked={this.state.jason}
onChange={this.handleChange('jason')}
value="jason"
/>
}
label="Jason Killian"
/>
</FormGroup>
</FormControl>
);
}
}
CheckboxesGroup.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(CheckboxesGroup);