I'm trying to reduce the width of the TextField component :
Here is the render method:
render() {
return (
<div>
<div>
<form onSubmit={this.handleSubmit}>
<TextField
hintText="Email"
ref="email"
/><br/>
<TextField
hintText="Password"
type="password"
ref="password"
/><br/>
<button className="btn btn-success" onClick={this.loginCommand}><i className="fa fa-sign-in"/>{' '}Log In</button>
</form>
</div>
}
</div>
);
}
}
You also can look at fullWidth property to make sure it is set properly.
<TextField
id="full-width-text-field"
label="Label"
placeholder="Placeholder"
helperText="Full width!"
margin="normal"
fullWidth // this may override your custom width
/>
You could either specify inline style on element like below
<TextField
hintText="Email"
ref="email"
style = {{width: 100}} //assign the width as your requirement
/>
Or you could do as below.
Declare a styles variable with css properties.
var styles = StyleSheet.create({
textFld: { width: 100, height: 40} //assign the width as your requirement
});
Assign it to style in your render code.
<TextField
hintText="Email"
ref="email"
style = {styles.textFld}
/>
Give it try let me know if it works for you. I am new to react js as well.
You could refer to documentations and other similar question on SO for clarity.
http://facebook.github.io/react-native/docs/style.html#content
http://facebook.github.io/react-native/
http://facebook.github.io/react-native/docs/flexbox.html#content
React.js inline style best practices
If you want to make the TextField's width expanded as much as the parent's width (width: 100%):
<TextField label="Full width" fullWidth />
If you want to set the TextField's width to the exact value:
<Box width={350}>
<TextField label="width: 350px" fullWidth />
</Box>
You can also set the style of the TextField directly if you don't want to add a wrapper component:
V5
<TextField label="width: 350px" sx={{ width: 350 }} />
V4
const useStyles = makeStyles({
root: {
width: 350
}
});
function App() {
const classes = useStyles();
return <TextField label="width: 350px" className={classes.root} />;
}
I'd advice you against using inline styles as suggested in other answers since inline styles are harder to override. You should by default use Material-UI styles because it's more flexible and better integrated with Material-UI components. For example, you can cherry-pick the sub-components to override in a larger components, or style psuedo classes and elements, which can't be done with inline style.
Live Demo
Related
I have this Autocomplete component in a React app as:
<Autocomplete
placeholder="Enter Suburb"
id="custom-input-demo"
options={Suburbs.map((suburb) => suburb.suburb)}
onChange={(event,value) => addSuburb(value)}
onFocus={()=>scrollToSuburb()}
defaultValue={customer.suburb ? customer.suburb : ''}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input style={{ width: 300 }} placeholder="Type.." type="text" {...params.inputProps} />
</div>
)}
/>
It appears with huge padding on the items as:
Render screenshot
I tried every possible way to alternate this style but wasn't able to.
What is the best way to style the Material UI react Autocomplete list?
I want to change the placeholder fontsize of Material Ui Autocomplet. Is there any way?
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
filterSelectedOptions
size="small"
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
placeholder="Enter Transshipment Ports"
/>
)}
/>
In your example, you can target the input element of the component you render in renderInput which is TextField using makeStyles
const useStyles = makeStyles({
customTextField: {
"& input::placeholder": {
fontSize: "20px"
}
}
})
<TextField
classes={{ root: classes.customTextField }}
{...params}
variant="outlined"
placeholder="Enter Transshipment Ports"
/>
Example below using forked MUI demo
You can just add the ::placeholder css to the class/id of the input field, and change the font-size
Example:
#tags-outlined::placeholder {
font-size: 14px;
}
The sx property allows users to override the styling applied to the MuiFormLabel-root object, including the font size. This is useful for creating custom labels that better suit the user's design needs.
<TextField
{...props}
sx={{
'& .MuiFormLabel-root': {
fontSize: '0.8rem',
},
}}
/>
Can I achieve avatar in the textfield of autocomplete material-ui component as the getOptionLabel prop only accepts a string and render option the expected UI is shown .i.e profile picture and Name, can we get the same thing i.e profile picture and name in the renderInput textField
You can return your custom component in renderInput props, and that custom can be a combination of icon and TextField Like this...
renderInput={(params, data) => (
<div style={{ position: "relative" }}>
{params.inputProps.value && (
<span
style={{
position: "absolute",
transform: "translateY(50%)",
marginLeft: "5px"
}}
>
{/* Write logic to have Icon from params.inputProps.value */}
{countryToFlag("AD")}
</span>
)}
<TextField
{...params}
label="Choose a country"
variant="outlined"
inputProps={{
...params.inputProps,
autoComplete: "new-password",
style: { paddingLeft: "20px" } // disable autocomplete and autofill
}}
/>
</div>
)}
As you can see I have provided the Absolute position span which will render the icon based on the selected value(I am still not able to find a way to access the options object).
Here is the complete and running sandbox project
I have a react modal and inside it I have react-select. How can I make select overlay the modal because some of my options in the botttom of modal did not appear ?
I tried z-index but it did not work.
<MainSelect
className="select"
id={name}
isMulti
isRtl={!locale.ltr}
components={{ Option: OptionComponent }}
styles={this.customStyles}
theme={this.customTheme}
options={options}
value={value}
placeholder={placeholder}
onChange={this.handleChange}
onBlur={formik.onBlur}
onMenuOpen={() => {
if (setScroll) setScroll();
this.props.formik.setStatus("onMenuOpen");
}}
/>
The issue here is the default style of React Modal i.e overflow:hidden. And React-modal allows you to easily override default styles. Just add overflow: visible to the modal's CSS.
<Select
menuPortalTarget={document.body}
styles={( menuPortal: base => ({ ...base, zIndex: 9999 }) )}
/>
I have the following input label:
<InputLabel>NAME</InputLabel>
My problem is that the text is in White (I don't get why is white, maybe I am doing something wrong), and I can't see white on white. How do I change the color to black?
You can give the <InputLabel /> a className:
<InputLabel classname="test-label">This is a label</InputLabel>
In your stylesheet:
.test-label: {
color: #000000 !important;
}
If you are trying to style the <InputLabel /> through a <TextField /> component
You can give the <InputLabel /> a class by accessing the <TextField /> InputLabelProps:
<TextField
label="This is a label"
InputLabelProps={{
className: "test-label"
}}
/>
In your stylesheet:
.test-label: {
color: #000000 !important;
}
This worked for me
<TextField
label="This is a label"
InputLabelProps={{
className: classes.formLabel
}}
/>
formLabel: {
color: '#000,
'&.Mui-focused': {
color: '#000
}
}
Use withStyles and classes property. Have a look at overriding with classes section and the implementation of the component for more detail.
Read the API of InputLabel here.
Create a required styles
const styles = theme => ({
cssLabel: {
color:'blue',//required color
},
)}
Apply the styles using FormLabelClasses property.
<InputLabel
FormLabelClasses={{
root: classes.cssLabel,
focused: classes.cssFocused,
}}
htmlFor="custom-css-input"
>
Custom CSS
</InputLabel>
Don't forget to import withStyles.
Refer Customised input in documentation itself.
What’s up? After looking for the answer it was as simple as
<Box>
<TextField
onChange={handleChange("quantity")}
label="$ Quantity"
variant="filled"
InputLabelProps={{
style: { color: "cadetblue" }
}}
/>
</Box>
react.js?
try use
const divStyle = {
color: 'blue',
};
<InputLabel style={divStyle} >NAME</InputLabel>
You can give the style for the below tag as follows;
<InputLabel style="color:black;">NAME</InputLabel>
or
Add the following for InputLabel in CSS and try:
InputLabel{
color: black;
}
The color of the input label doesn't necessarily remain when it's in focus, and will be overridden by the defaults. The way that I solved this and to get the font colour to remain the same was by doing the following in typescript:
const styles = (theme: Theme) => createStyles({
formText: {
color: theme.palette.secondary.contrastText,
'&$formLabelFocused': {color: theme.palette.secondary.contrastText}
},
formLabelFocused: {
}
})
class Example extends React.Component<>{
public render() {
<FormControl>
<InputLabel
FormLabelClasses={{
root: classes.formText,
focused: classes.formLabelFocused
}}
>
Currency
</InputLabel>
</FormControl>
<Select>
<MenuItem key={1}>Example</MenuItem>
</Select>
}
}
I struggled with many variations on this before getting the right workaround
Please try this:
const divStyle = {
color: 'blue',
};
<InputLabel style={divStyle} >NAME</InputLabel>