I'm trying to override the style for the selected tab, but some of the overrides don't work. I'm doing,
const StyledTab = withStyles({
root: {
color: '#0071bc',
fontWeight: '600'
},
selected: {
color: '#fff' <--- doesn't work
}
})(Tab)
which, to me, looks like what the documentation is telling me to do. If I set the background on selected, the background color changes, but the font color does not.
Am I doing something wrong with the override?
Edit
Using !important forces it, but I don't want to use !important if I can avoid it.
I could come up with a solution using overriding CSS using withStyles,
<Tabs
value={value}
onChange={this.handleChange}
scrollable
scrollButtons="on"
classes={{ indicator: classes.tabsIndicator }}
>
<Tab
label="Search"
icon={<PhoneIcon />}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
<Tab
favorites={favorites}
label="Favorites"
icon={<FavoriteIcon />}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
</Tabs>
If we take this as the code you can use this styles to override,
const styles = theme => ({
tabsIndicator: {
backgroundColor: "red"
},
tabRoot: {
"&:hover": {
color: "red",
opacity: 1
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium
},
"&:focus": {
color: "red"
}
},
tabSelected: {}
});
find that tabSelected is an empty value but &$tabSelected overrides the values
here is a working sample - https://codesandbox.io/s/882o65xlyl
hope this will help you.
Related
I am using Material UI's Autocomplete/TextField and I want to override its default CSS on hover and when the text field is in focus state.
Default CSS:
Image for default CSS in focused state
I want to change this blue colour when input box is in focus state.
I have tried using ThemeProvider/createTheme hook but it is not helping. Below is the code for createTheme:
import { ThemeProvider, createTheme } from "#mui/material/styles";
const overrideTheme = createTheme({
overrides: {
MuiInput: {
root: {
"&$focused": {
borderColor: "red",
},
},
},
},
});
export default function AutocompleteComponent() {
return (
<ThemeProvider theme={overrideTheme}>
<Autocomplete
classes={classes}
freeSolo
id="free-solo-2-demo"
options={
autocompleteResult ? top100Films.map((option) => option.title) : []
}
renderInput={(params) => (
<TextField
variant="outlined"
{...params}
placeholder="Search..."
InputProps={{
...params.InputProps,
type: "search",
classes: {
root: classes.root,
notchedOutline: classes.notchedOutline,
},
className: classes.input,
endAdornment: false,
}}
/>
)}
/>
</ThemeProvider>
);
}
You have to use the browser dev tools to identify the slot for the component you want to override. Once that's done, you write a CSS file with the class you want to change.
To force the class you can use :
!important
file : styles.css
exemple:
.css-1q6at85-MuiInputBase-root-MuiOutlinedInput-root{
border-radius: 50px!important;
}
I think it's just a simple task in HTML/CSS but in Material-UI, how to set different font size for TextField in Material-UI?
The following code does not work:
<TextField
name="keyword"
InputProps={{
style: styles.textField
}}
placeholder="Type here"
/>
const styles = {
textField: {
fontSize: 16,
'#media (min-width: 576px)': {
fontSize: 20
},
'#media (min-width: 768px)': {
fontSize: 22
}
}
};
to change the font size of TextField with media-query, target the root input class by using the InputProps prop, and select the input class. classes provided in InputProps is applied to the input element.
<TextField
InputProps={{ classes: { input: classes.textFieldStyle} }}
variant="outlined"
/>
Now style the textFeildStyle class inside the makeStyles and for adding #media-queries use the theme.breakpoints method. It is explained here.
const useStyles = makeStyles((theme) => ({
[theme.breakpoints.down("lg")]: {
textFieldStyle: {
color: "yellow",
fontSize: 19
}
},
[theme.breakpoints.down("md")]: {
textFieldStyle: {
color: "green",
fontSize: 17
}
},
[theme.breakpoints.down("sm")]: {
textFieldStyle: {
color: "blue",
fontSize: 15
}
}
}));
Working sandbox demo:
How do you change the default 16px browser font-size to 10px using Material UI? As I understand it, MUI uses Nomralize.css under the hood?
In the my theme file I have
export default createMuiTheme({
overrides: {
MuiCssBaseline: {
'#global': {
html: {
padding: '0',
},
},
},
},
typography: {
htmlFontSize: 10,
fontSize: 8,
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
fontWeight: 400,
},
})
but I don't know if this is right..
My app is also wrapped with CssBaseLine
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<CssBaseline />
<App />
</MuiThemeProvider>
</Provider>,
document.getElementById('root'),
Is this correct? I remember the 62.5% trick and trying to accomplish something similar I guess
Your code is just fine and for future reference use use React DevTools to verify if your properties really apply or not (after React DevTools setup look for the ThemeProvider props).
I'm updating my app from Material-UI v1 to v2. I'm trying to use a style override to set the color of a selected <BottomNavigationAction> element.
const styles = {
bottomNavStyle: {
position: 'fixed',
left: '0px',
bottom: '0px',
height: '50px',
width: '100%',
zIndex: '100'
},
'&$selected': {
color: "#00bcd4" //<==trying to add this color to selected items
},
};
class bottom_nav extends Component {
state = {
selectedIndex: -1,
};
handleChange = (event, value) => {
this.setState({value});
};
render() {
const { classes } = this.props;
return (
<Paper className={classes.bottomNavStyle}>
<BottomNavigation
value={this.props.selectedBottomNavIndex}
onChange={this.handleChange}
showLabels
>
<BottomNavigationAction
label="Appointments"
icon={theApptsIcon}
/>
<BottomNavigationAction
label="Contacts"
icon={theEmailIcon}
/>
<BottomNavigationAction
label="Video Call"
icon={theVideoCall}
/>
</BottomNavigation>
</Paper>
);
}
}
export default withStyles(styles)(bottom_nav);
But, this does not do anything to the color of selected items.
I've read the Material-UI docs on CSS in JS and JSS, but haven't quite gotten it yet. What is the correct syntax for this?
UPDATE
Based on a response to this thread I've tried this:
const styles = {
bottomNavStyle: {
position: 'fixed',
left: '0px',
bottom: '0px',
height: '50px',
width: '100%',
zIndex: '100'
},
actionItemStyle: {
'&$selected': {
color: "#00bcd4 !important"
},
},
}
[.....]
return (
<Paper className={classes.bottomNavStyle}>
<BottomNavigation
value={this.props.selectedBottomNavIndex}
onChange={this.handleChange}
showLabels
>
<BottomNavigationAction
label="Appointments"
icon={theApptsIcon}
className={classes.actionItemStyle}
/>
<BottomNavigationAction
label="Contacts"
icon={theEmailIcon}
className={classes.actionItemStyle}
/>
<BottomNavigationAction
label="Video Call"
icon={theVideoCall}
className={classes.actionItemStyle}
/>
</BottomNavigation>
</Paper>
);
}
...but have not yet gotten the new color to appear on the web page.
Your updated solution looks good, there are just a few small changes...
You need to include an empty .selected class in your styles rules.
const styles = {
// Root styles for `BottomNavigationAction` component
actionItemStyles: {
"&$selected": {
color: "red"
}
},
// This is required for the '&$selected' selector to work
selected: {}
};
You need to pass classes={{selected: classes.selected}} to BottomNavigationAction. This is required for the '&$selected' selector to work.
<BottomNavigation
value={value}
onChange={this.handleChange}
className={classes.root}
>
<BottomNavigationAction
classes={{
root: classes.actionItemStyles,
selected: classes.selected
}}
label="Recents"
value="recents"
icon={<RestoreIcon />}
/>
</BottomNavigation>
Live Example:
There are couple of things I would like to suggest.
1) Write the name of the component with first letter capitalized since it is not treated the same way if it is named with small first letter and with capitalized.
2) If there is no other way for your cs rule to be applied, if it is overridden always because of some css specificity, use !iportant at the end of the rule.
3) Try this type of nesting of css in jss:
const styles = {
bottomNavStyle: {
position: 'fixed',
left: '0px',
bottom: '0px',
height: '50px',
width: '100%',
zIndex: '100',
'&:selected': {
color: "#00bcd4"
},
},
};
I'm having an issue with replacing the Input component for react-select v2 with the Input component from Material UI.
I've made an attempt so far in the codesandbox below, but unable to invoke the filtering upon typing into the Input?
https://codesandbox.io/s/jjjwoj3yz9
Also, any feedback on the Option replacement implementation would be appreciated. Am I going about it the right way with grabbing the text of the clicked option and search for the Option object from my options list to pass to the selectOption function?
Much appreciated,
Eric
V1
refer the documentation from here : https://material-ui.com/demos/autocomplete/
it provides clear documentation about how to use react-select with material-ui
here is a working example for your question: https://codesandbox.io/s/p9jpl9l827
as you can see material-ui Input component can take react-select as inputComponent.
V2
It's almost same as the previous approach :
implement the Input component:
<div className={classes.root}>
<Input
fullWidth
inputComponent={SelectWrapped}
value={this.state.value}
onChange={this.handleChange}
placeholder="Search your color"
id="react-select-single"
inputProps={{
options: colourOptions
}}
/>
</div>
and then SelectWrapped component implementation should be:
function SelectWrapped(props) {
const { classes, ...other } = props;
return (
<Select
components={{
Option: Option,
DropdownIndicator: ArrowDropDownIcon
}}
styles={customStyles}
isClearable={true}
{...other}
/>
);
}
and I overrides the component Option and DropdownIndicator to make it more material and added customStyles also:
const customStyles = {
control: () => ({
display: "flex",
alignItems: "center",
border: 0,
height: "auto",
background: "transparent",
"&:hover": {
boxShadow: "none"
}
}),
menu: () => ({
backgroundColor: "white",
boxShadow: "1px 2px 6px #888888", // should be changed as material-ui
position: "absolute",
left: 0,
top: `calc(100% + 1px)`,
width: "100%",
zIndex: 2,
maxHeight: ITEM_HEIGHT * 4.5
}),
menuList: () => ({
maxHeight: ITEM_HEIGHT * 4.5,
overflowY: "auto"
})
};
and Option:
class Option extends React.Component {
handleClick = event => {
this.props.selectOption(this.props.data, event);
};
render() {
const { children, isFocused, isSelected, onFocus } = this.props;
console.log(this.props);
return (
<MenuItem
onFocus={onFocus}
selected={isFocused}
onClick={this.handleClick}
component="div"
style={{
fontWeight: isSelected ? 500 : 400
}}
>
{children}
</MenuItem>
);
}
}
please find the example from here: https://codesandbox.io/s/7k82j5j1qx
refer the documentation from react select and you can add more changes if you wish.
hope these will help you.