I want to display such a field
But even when the field is in focus the border remains intact and is not cut by the label
I am using material-UI TextField
You want to:
hide the label (I am doing it when you enter a value just to show you - you can remove it altogether if you'd like)
complete the border i.e. remove the legend (CSS)
relevant CSS:
legend { border:1px solid red; display:none; }
relevant js:
const styles = theme => ({
cssLabel: {
color: "green"
},
cssLabelHide: {
display: "none"
},
});
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange("name")}
margin="normal"
variant="outlined"
InputLabelProps={{
classes: {
root:
this.state.labelVisibility === true
? classes.cssLabel
: classes.cssLabelHide,
focused: classes.cssFocused
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline
},
inputMode: "numeric"
}}
/>
working stackblitz here
Related
I would like to make a row, where there is a title on the left and several buttons and a dropdown on the right.
Now, I would like to make the distance between Button 2 and the dropdown (e.g., Cat) smaller.
I guess we need to overwrite the left padding of the button inside the dropdown. I tried to put marginLeft: "-10px" and paddingLeft: "-10px" in the style of FluentProvider or Dropdown, but it did not work.
Could anyone help?
CodeSandbox: https://codesandbox.io/s/charming-ritchie-40tyj1?file=/example.tsx
import {
FluentProvider,
webLightTheme,
makeStyles,
shorthands
} from "#fluentui/react-components";
import {
Dropdown,
Option,
OptionGroup,
DropdownProps
} from "#fluentui/react-components/unstable";
import { CommandBarButton } from "#fluentui/react/lib/Button";
import * as React from "react";
import { initializeIcons } from "#fluentui/react/lib/Icons";
initializeIcons(/* optional base url */);
const useStyles = makeStyles({
dropdown: {
// removes default border around the dropdown
...shorthands.borderWidth(0),
// removes the blue bottom border when the dropdown is open
"::after": {
borderBottomWidth: 0
}
}
});
export const Grouped = (props: Partial<DropdownProps>) => {
const land = ["Cat", "Dog", "Ferret", "Hamster"];
const styles = useStyles();
return (
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div style={{ flexBasis: "auto" }}>
<span style={{ lineHeight: "2.7rem" }}>Title</span>
</div>
<div style={{ display: "flex" }}>
<CommandBarButton
styles={{ root: { height: 44 } }}
iconProps={{ iconName: "Back" }}
ariaLabel="Back"
text="Button 1"
disabled={false}
checked={false}
/>
<CommandBarButton
styles={{ root: { height: 44 } }}
iconProps={{ iconName: "Up" }}
text="Button 2"
disabled={false}
checked={false}
/>
<FluentProvider style={{ display: "flex" }} theme={webLightTheme}>
<Dropdown
className={styles.dropdown}
style={{
minWidth: "auto",
display: "flex"
}}
defaultSelectedOptions={["Cat"]}
{...props}
>
<OptionGroup label="Land">
{land.map((option) => (
<Option key={option} disabled={option === "Ferret"}>
{option}
</Option>
))}
</OptionGroup>
</Dropdown>
</FluentProvider>
</div>
</div>
);
};
There might be many approaches, perhaps try specify styles for Dropdown button in makeStyles and pass it to the button. The value in below example can be further adjusted to suit the use case.
Forked demo with modification: codesandbox
const useStyles = makeStyles({
dropdown: {
// removes default border around the dropdown
...shorthands.borderWidth(0),
// removes the blue bottom border when the dropdown is open
"::after": {
borderBottomWidth: 0
}
},
// 👇 styles for the dropdown button
button: {
paddingLeft: "0px"
}
});
Pass the styles to the button of Dropdown:
<Dropdown
className={styles.dropdown}
style={{
minWidth: "auto",
display: "flex",
}}
defaultSelectedOptions={["Cat"]}
// 👇 pass styles to the button
button={{ className: styles.button }}
{...props}
>
...
You cant assign negative values to the padding. Try the same idea but on Button2, but with negative margin-right: -10px You then might need to move the whole navbar 10px to the right, since it wont stay aligned as it is now. You can fix it by doing the same on navbar content.
You might also try overriding padding with padding-left: 0 !important
Hi I am having trouble changing the color of the text label in a MUI text field. I've managed to customise the border colors, and hover states (including the label) - just not the label color when not in hover state. I've tried various class names (including MuiInputBase-input) I found in the DOM as I did with the others, but to no avail. I also tried inputProps, but doesn't do anything either. Here is my code
<TextField
className="w-full my-2 "
id="outlined-basic"
label="Distance (miles)"
inputProps={{ sx: {color: '#F1F4F9'} }} <- this doesn't do anything
variant="outlined"
onChange={(e) => {setSearchParams({...searchParams, dist: e.target.value})} }
sx={{
// focused border color
"&& .Mui-focused .MuiOutlinedInput-notchedOutline": {
border: "1px solid #3B82F6",
},
// focussed label color
"& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": {
color: "#3B82F6",
},
// normal border color
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #F1F4F9",
},
// normal label color - <- DOESN'T DO ANYTHING
"& .MuiInputBase-root-MuiOutlinedInput-root": {
color: "#F1F4F9"
},
}}
/>
Here, this is one way you can change the label color:
<TextField
className="w-full my-2 "
id="outlined-basic"
label="Distance (miles)"
InputLabelProps={{
sx: { color: "red", "&.Mui-focused": { color: "green" } },
}}
variant="outlined"
/>
Some tips:
Don't use/copy the generated classes from the DOM, because they can change!
.MuiFormLabel-root DO
.css-1sumxir-MuiFormLabel-root - DON'T
Double ampersant is not valid syntax
& .MuiFormLabel-root DO
&& .MuiFormLabel-root DON'T
I am using Material-UI version 4 and not the latest mui v5.
I have tried the following to no avail. I just want to remove/hide the border around the textfield component.
<TextField
disabled={true}
variant="standard"
InputProps={{
style: { backgroundColor: '#d6eaf8', fontSize: '18px', color: 'black' },
underline: {
"&&&:before": {
borderBottom: "none"
},
"&&:after": {
borderBottom: "none"
}
}
}}
/>
If you only want to remove the material ui underline border you simply use the "disableUnderline: 'true'" property like this:
<TextField
disabled={true}
variant="standard"
InputProps={{
disableUnderline: 'true',
style: {
backgroundColor: "#d6eaf8",
fontSize: "18px",
color: "black"
}
}}
/>
If you want to have all the TextInputs look the same I would recommend setting up a custom Theme, though.
updated:
Another way of removing the border is to fiddle around with the CSS Global classes such as:
const StyledTextField = withStyles({
root: {
"& .MuiOutlinedInput-root": {
backgroundColor: "lightblue",
"& fieldset": {
border: "none"
}
}
}
})(TextField);
return <StyledTextField variant="outlined" />;
updated 2:
or if you rather use a custom theme:
const theme = createTheme({});
theme.overrides = {
MuiOutlinedInput: {
root: {
backgroundColor: 'lightblue',
},
notchedOutline: {
border: "none"
}
}
};
...
<ThemeProvider theme={theme}>
<TextField variant="outlined" />
</ThemeProvider>
I'm using React Material Autocomplete fields in my project that has a nested TextField. I've currently applied standard styles to it (when no value is present and just the label is showing in the field), and also different styles on hover. However, I want the same hover styles to be applied to the whole Autocomplete box (not just the TextField element) if the TextField has a value in it, but I'm unable to figure out how to do this. My Autocomplete code and current CSS styles are below. Please could anybody help and let me know how I can do this?
Autocomplete Code
const renderComponentList = (componentList, isDisabled, name, label) => (
componentList &&
<Autocomplete
classes={{
root: classes.root,
}}
options={componentList}
disabled={isDisabled}
name={name}
getOptionLabel={(option) => option.name}
onChange={
(event, value, reason) => {
this.handleAutocompleteChange(name, value);
}
}
style={{width: '100%'}}
renderInput={
(params) =>
<TextField
{...params}
name={name}
label={label}
variant="outlined"
/>
}
/>
);
CSS Styles
export const styles = theme => ({
// Autocomplete option styles
root: {
color: '#FFFFFF',
backgroundColor: '#303039',
opacity: 0.6,
"&:hover": {
backgroundColor: '#1E1E24',
borderRadius: '5px',
opacity: 1,
},
"&:focus-within": {
backgroundColor: '#1E1E24',
borderRadius: '5px',
opacity: 1,
},
// Something like this to style the autocomplete when input has a value, but this only
// targets the input field (TextField) rather than the whole Autocomplete field
// "& input[value]:not([value=''])": {
// backgroundColor: '#1E1E24',
// borderRadius: '5px',
// opacity: 1,
// },
"& .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
"&:hover .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
borderRadius: '5px 5px 0 0',
},
"& .MuiInputLabel-outlined": {
color: '#FFFFFF',
},
"& .Mui-disabled": {
opacity: 0.6,
},
"& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
},
});
I've managed to resolve the issue. I had to create a new class for the desired style when a value was present and conditionally render it in the Autcomplete element, based on the relevant state.
To conditionally render the class, I had to pass in stateVal as one of the props in my function and then change the root line in the Autocomplete classes property to root: stateVal ? classes.rootHasVal : classes.rootHasNoVal, instead.
Still very new to Material-UI. Using the default theme/colors, I want to create an AppBar that has a FormControl/InputLabel/Select/MenuItem in it. With the defaults, I get a black input field on blue, which isn't great. I think probably having the input field and labels be theme.palette.primary.light would make more sense. I started to look in to how to do this and got in to setting FormLabelClasses to the InputLabel, setting inputProps to Select to set classes on the icon, and setting &:before and &:after to borders on the Select and so on... I feel like I'm doing this wrong since that seems to be quite a bit of work for something I think would be somewhat normal to do? To top it off, it's still not right (when you hover, the underline border goes black and I can't figure out how to fix that!)
Here's my code:
const styles = theme => ({
root: {
minWidth: 200,
marginTop: '-10px',
},
inputLabel: {
color: theme.palette.primary.light,
'&$inputLabelFocused': {
color: theme.palette.primary.light,
},
},
inputLabelFocused: {
},
icon: {
fill: theme.palette.primary.light,
},
select: {
color: theme.palette.primary.light,
'&:before': {
borderColor: theme.palette.primary.light,
},
'&:after': {
borderColor: theme.palette.primary.light,
},
},
})
class CustomSelector extends React.Component {
render() {
const { classes } = this.props;
return(
<div>
<FormControl className={classes.root}>
<InputLabel FormLabelClasses={{ root: classes.inputLabel, focused: classes.inputLabelFocused }}>Choose</InputLabel>
<Select value="" className={classes.select} inputProps={{ classes: { icon: classes.icon } }} autoWidth="true">
<MenuItem value=""><em>None</em></MenuItem>
<MenuItem value="Value 1">Value 1</MenuItem>
</Select>
</FormControl>
</div>
)
}
}