Using Material-UI v1:
How do I change the font of a TextField? I'm trying to apply a Roboto Mono font to it.
What I currently have is
import 'typeface-roboto-mono';
...
<TextField
...
inputProps={{ fontFamily: 'Roboto Mono' }}
/>
But that's not working.
Thanks.
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'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>
In Material-UI (MUI) TextField, we can have both a label and a placeholder, but when the text field is empty, we can only see the label. We have to start editing the TextField in order to see the placeholder. Is there a way to say that both the label and placeholder should show initially when the field is empty? We'd also like to style the placeholder slightly differently by making it slightly gray compared to the black label text color. Is there a way to do this?
you can force input label to shrink. https://mui.com/components/text-fields/#shrink
you can add input Text color with sx props on TextField. placeholder takes color from the input text color too. you can test this by removing inputProps props in below code.
if you want different colors for input text and placeholder use inputProps
ref: Styling the placeholder in a TextField
<TextField
sx={{
"& .MuiOutlinedInput-root": {
color: "red"
}
}}
variant="outlined"
label="Your custom label"
placeholder="Placeholder Text"
InputLabelProps={{ shrink: true }}
inputProps={{
sx: {
"&::placeholder": {
color: "green"
}
}
}}
/>
iam still looking the best resolution..
my current approach
<TextField focused label="Standard" placeholder='lorem ipsum' />
or
<TextField InputLabelProps={{ shrink: true }} label="Standard" placeholder='lorem ipsum' />
This works for me:
<TextField InputLabelProps={{ shrink: true }} label="Name" placeholder='lorem ipsum' />
You can use placeholder and label both. but, when the user click on the textfield, the placeholder will be displayed
<TextField id="standard-basic" placeholder="enter" label="Standard" variant="standard" />
https://codesandbox.io/s/basictextfields-material-demo-forked-i7tcn?file=/demo.js
In actually it is not a placeholder in textfield. It is label.
It changes with simple classname of textfield "MUI form label root".
Assign colour on normal way.
How do you set the in-line font size on a Material-UI FormControlLabel? The below attempt does not work.
const styles: any = createStyles({
formControlLabel: { fontSize: '0.6rem',
'& label': { fontSize: '0.6rem' } }
});
<FormControlLabel style={styles.formControlLabel}
control={<Checkbox value="Hello" color="primary" />}
label="World"
/>
You could define the label as a Typography component and apply the style there:
<FormControlLabel
control={<Checkbox value="Hello" color="primary" />}
label={<Typography style={styles.formControlLabel}>World</Typography>}
/>
UPDATE:
As per Saber's comment, newer versions should instead use:
<FormControlLabel
control={<Checkbox value="Hello" color="primary" />}
label={<Typography className={styles.formControlLabel}>World</Typography>}
/>
Use material box fontSize instead of giving external style.
<FormControlLabel
control={<Checkbox name="checkbox" />}
label={
<Box component="div" fontSize={15}>
Small
</Box>
}
/>
FormControlLabel exposes typography as prop. tested and works in Mui V5. https://mui.com/api/form-control-label/#props
<FormControlLabel
componentsProps={{ typography: { variant: 'h3' } }}
/>
Use overrides section in theme.ts
export default createMuiTheme({
overrides: {
MuiFormControlLabel: {
label: {
fontSize: 14,
},
},
});
In MUI v5 you could do it like this:
<FormControlLabel
label={
<Typography sx={{ fontSize: 16 }}>
Label Text
</Typography>
}
control={<Switch />}
/>
Here's another option to achieve the same thing, but without the extra p that using <Typography /> will give you (referencing MUI v4 as the post is from before v5, although I'm sure this solution will work there too).
By referring to the docs for the FormControlLabel you can see the styles for the label can be modified with the label rule (kinda like you've tried to do already), however another approach would be to style the label by using withStyles
const StyledFormControlLabel = withStyles(() => ({
label: {
fontSize: '0.6rem',
}
}))(FormControlLabel);
...
<StyledFormControlLabel
control={<Checkbox value="Hello" color="primary" />}
label="World"
/>
Hi I want to style three buttons with different colors but When those buttons are disabled the custom style I've added at the beginning overrides the default style disabledTextColor, which adds a default fade and transparency value, so users can see that the button is disabled. How can style the disabled state or which should be the correct way to style the labelStyle and/or disabledTextColor? Here is an example
const style = {
labelStyle: {
color: 'red;
}
}
<FlatButton
label='Mit Linkedin anmelden'
labelPosition='after'
icon={<LinkedinIcon />}
onClick={() => Meteor.loginWithLinkedin()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
<div className='mdl-cell mdl-cell--12-col'>
<FlatButton
label='Mit Google anmelden'
labelPosition='after'
icon={<GoogleIcon />}
onClick={() => Meteor.loginWithGoogle()}
disabled={true}
labelStyle={style.labelStyle}
/>
</div>
in this case the button always stays red even though the disabled state in True
You can create a little wrapper component around FlatButton that conditionally fades the labelStyle when the button is disabled.
const CustomFlatButton = (props) => (
<FlatButton
{...props}
labelStyle={{ ...props.labelStyle, opacity: props.disabled ? 0.3 : 1 }}
/>
);
...
<CustomFlatButton label="Disabled Red" style={{ color: 'red' }} disabled />
https://jsfiddle.net/6rads3tt/2/