I'm currently using the List.Accordion component by react native paper and when being selected on IOS the entire List.Accordion component gets highlighted in white but on Android it instead gets highlighted with a dark shade and I'm not sure why. Could someone help?
Here is the current code for the component:
<List.Accordion
title='Advanced Options'
titleStyle={{ color: 'white', fontSize: 19, fontWeight: 'bold' }}
onPress={() => {
setTimeout(() => {
scrollViewRef.current.scrollToEnd({ animated: true });
}, 50);
}}
theme={{ colors: { text: 'white'} }}
style={{ backgroundColor: Colors.theme, paddingHorizontal: 12 }}
>
The List.Accordion component is currently styled with a dark blue background (making the white highlight quite obvious) and the onPress is in no way changing the style of the component, simply just scrolling the screen downwards to reveal the List items.
I think you can use text-decoration style property to customize it.
you can use underlayColor props and set with transparent
<ListItem.Accordion
underlayColor={'transparent'}
style{{overflow:'hidden',backgroundColor:'transparent',borderless:true}}containerStyle={{
overflow:'hidden',
I'm creating a custom Data Grid Toolbar component by modifying existing Grid Toolbar components from Material-UI.
Here is the official example for the Grid Toolbar components:
If we click one of the Grid Toolbar components, it will show a popup/popper as seen in the screenshot below.
What I want to do is to change all font sizes inside every popup/popper from each Grid Toolbar component.
I try to change one text for example.
As we can see from the screenshot below, if we inspect the text then change the font-size and color properties directly, it would change.
But if I grab and copy the selector (in this case is .MuiTypography-body1), then I paste it in my code, there nothing changes (the font-size and color properties don't change).
Here is the simple code:
const CustomGridToolbarColumns = withStyles((theme) => ({
root: {
color: "dodgerblue",
"& .MuiTypography-body1": {
fontSize: 20,
color: "red"
}
}
}))(GridToolbarColumnsButton);
I also want to change all font-size and color properties inside each popup/popper of each Grid Toolbar component.
I inspect the popup/popper then change the font-size and color properties but still don't work as seen in the screenshot below.
Here are the dependencies (in package.json file):
"#material-ui/core": "^4.12.3",
"#material-ui/styles": "^4.11.4",
"#mui/x-data-grid-pro": "^4.0.0",
Here is the full code: https://codesandbox.io/s/data-grid-material-ui-custom-toolbar-kd9gj
So my questions are:
how can we change some properties inside the popup/popper of every Grid Toolbar component?
how can we change all properties inside the popup/popper of every Grid Toolbar component?
You can inspect the element and see that the component you need to apply the style to is called GridPanel. This is the wrapper component of the filters and columns panel. See all the component slots here for reference.
V5
<DataGrid
{...data}
components={{
Toolbar: GridToolbar,
}}
componentsProps={{
panel: {
sx: {
'& .MuiTypography-root': {
color: 'dodgerblue',
fontSize: 20,
},
'& .MuiDataGrid-filterForm': {
bgcolor: 'lightblue',
},
},
},
}}
/>
In order to change the styles of the other 2 GridMenus (density/export), you need to target the MuiDataGrid-menuList class name. Currently I see there is no other way around using global styles because DataGrid does not allow you to customize the GridMenu component:
<GlobalStyles
styles={{
'.MuiDataGrid-menuList': {
backgroundColor: 'pink',
'& .MuiMenuItem-root': {
fontSize: 26,
},
},
}}
/>
V4
import { DataGrid, GridToolbar, GridPanel } from "#mui/x-data-grid";
const useStyles = makeStyles({
panel: {
'& .MuiTypography-root': {
color: 'dodgerblue',
fontSize: 20,
},
},
});
<DataGrid
{...data}
components={{
Toolbar: GridToolbar,
}}
componentsProps={{
// GridPanel
panel: { className: classes.panel },
}}
/>
<GlobalStyles
styles={{
".MuiDataGrid-gridMenuList": {
backgroundColor: "pink",
"& .MuiMenuItem-root": {
fontSize: 26
}
}
}}
/>
I wanted to change the icon in material UI's AutoComplete. I was not able to find any documentation to customize it.
Basically the two icons, marked with 1 and 2. I am new to Material Ui and would like to know if this can be done and how.
Codepen for the same is https://codesandbox.io/s/material-demo-9vhkq
Explain
If you check the DOM structure of it, you would find two button which have the class of something kind like
className="MuiButtonBase-root MuiIconButton-root MuiAutocomplete-clearIndicator MuiAutocomplete-clearIndicatorDirty"
className="MuiButtonBase-root MuiIconButton-root MuiAutocomplete-popupIndicator"
Inside of them you can find the specific className
MuiAutocomplete-clearIndicator
MuiAutocomplete-popupIndicator
Which you can refer to Material-UI Autocomplete css api document
clearIndicator
popupIndicator
By setting styles to it, you can change it's styles, and the icons.
Code
const useStyles = makeStyles(theme => ({
root: {
backgroundColor: "yellow"
},
clearIndicator: {
backgroundColor: "gray",
"& span": {
"& svg": {
"& path": {
d: "path('M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z')" // your svg icon path here
}
}
}
},
popupIndicator: {
backgroundColor: "blue"
}
}));
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
classes={{
clearIndicatorDirty: classes.clearIndicator,
popupIndicator: classes.popupIndicator
}}
Example:
You can change the popup icon with the API using the popupIcon property:
popupIcon={<ImportContacts />}
Shows as:
Full API found here:
https://material-ui.com/api/autocomplete/
I'm using react-native-web with expo and react-native-paper (material ui)
My problem is textarea on focus outline property in the compiled web version so I need to get rid of this blue borders. Normally I'll do
textarea:focus {
outline:none!important
}
With react-native we cannot use css and only jss but how to do it for this property?
<TextInput
label='Email'
value={this.state.text}
onChangeText={text => this.setState({ text })}
style={???}
/>
working example
You can't do such with inline style of React components. There're 2 ways of achieving this.
Option 1: put your styles inside the component's state and use onFocus to manipulate it
Option 2: use a CSS in JS library like https://www.styled-components.com/
This might help
state = {
backgroundColor: 'green'
}
onFocus() {
this.setState({
backgroundColor: 'green'
})
}
onBlur() {
this.setState({
backgroundColor: '#ededed'
})
}
<TextInput
onBlur={ () => this.onBlur() }
onFocus={ () => this.onFocus() }
style={{ height:60, backgroundColor: this.state.backgroundColor }} />
If your using react-jss you can specify event styling like focus and hover like this &:hover &:focus
I have been trying to work out how to style a material-ui TextField component.
<TextField
id="email"
label="Email"
className={classes.textField}
value={this.state.form_email}
onChange={this.handle_change('form_email')}
margin="normal"
/>
My classes are created as follows:
const styles = theme => ({
textField: {
width: '90%',
marginLeft: 'auto',
marginRight: 'auto',
color: 'white',
paddingBottom: 0,
marginTop: 0,
fontWeight: 500
},
});
My problem is that I can not seem to get the colour of the text field to change to white. I seem to be able to apply styling to the overall text field (because the width styling works etc)... but I think the problem is that I am not applying the styles further down the chain and into the actual input.
I have tried to look at the other answers dealing with passing inputProps but have had no success.
Have tried everything to the best of my ability but think I need to ask if anyone knows what I am doing wrong.
What it currently looks like
You need to add the InputProps property to the TextField.
const styles = theme => ({
textField: {
width: '90%',
marginLeft: 'auto',
marginRight: 'auto',
paddingBottom: 0,
marginTop: 0,
fontWeight: 500
},
input: {
color: 'white'
}
});
JSX:
<TextField
id="email"
label="Email"
className={classes.textField}
value={this.state.form_email}
onChange={this.handle_change('form_email')}
margin="normal"
InputProps={{
className: classes.input,
}}
/>
As an aside, you can also style the label or use an override as described here.
All the answers here shows how to style things with InputProps or inputProps, but no one explained why, and how it works. And no one explained whats the difference between inputProps and InputProps
<TextField
variant="outlined"
// inputProps are used to pass attributes native to the underlying
// HTML input element, e.g. name, id, style.
inputProps={{
style: { textAlign: 'center' },
}
// InputProps (capital I) passes props to the wrapper Material
// component. Can be one of the following: Input, FilledInput,
// OutlinedInput. You can pass here anything that the underlying
// Material component uses: error, value, onChange, and classes.
InputProps={{
// Usually you don't need className, the `classes` object will
// be sufficient. However, you can also use it and this will
// add your class to the div of the InputBase.
className: styles.slider_filter_input,
classes: {
root: classes.root
focused: classes.focused
// The list of keys you pass here depend on your variant
// If for example you used variant="outlined", then you need
// to check the CSS API of the OutlinedInput.
}
}}
/>
Here is a working codesandbox showing the ideas above.
This is a solution with inline styles:
<TextField
style={{
backgroundColor: "blue"
}}
InputProps={{
style: {
color: "red"
}
}}
/>
I'd suggest keeping your style within a theme.
const theme = createMuiTheme({
overrides: {
MuiInputBase: {
input: {
background: "#fff",
},
},
},
});
It really depends on what exactly are you trying to change.
The documentation has a bunch of examples on custom TextFields, take a look at them here:
https://material-ui.com/demos/text-fields/#customized-inputs
More information about customization can be found here:
https://material-ui.com/customization/overrides/
and
https://material-ui.com/customization/themes/
Have you tried using !important for the color changes? I had the same problem when I tried to set a default color for the border of an outlined TextField
Take a look at this: https://stackblitz.com/edit/material-ui-custom-outline-color
You cann pass styles to any of the children elements in the hierarchy:
TextField > Input > input (HTML element)
Notice the uper or lower case in InputProps vs. inputProps
// pass styles (or props) to the Input component
<TextField InputProps={{className: classes.input}} />
// pass styles (or props) to the inner input element
<TextField inputProps={{className: classes.input}} />
<TextField
color="whitish"
label="Enter Your Name"
type="Text"
InputLabelProps={{
style: { color: "white" },
}}
sx={{
".css-x2l1vy-MuiInputBase-root-MuiOutlinedInput-root": {
color: "white",
},
}}
InputProps={{
sx: {
".css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
border: "2px solid white",
},
"&:hover": {
".css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
border: "2px solid white",
},
},
},
}}
size="medium"
variant="outlined"
fullWidth
value={name}
onChange={(e) => {
setName(e.target.value);
}}
/>
Customize on_hover,color,border TextField
Try using the inputStyle prop on TextField. From the docs...
inputStyle (object) - Override the inline-styles of the TextField's input
element. When multiLine is false: define the style of the input
element. When multiLine is true: define the style of the container of
the textarea.
<TextField inputStyle={{ backgroundColor: 'red' }} />
As of MUI V5, you can use the sx prop to change style settings. You still need to use inputProps to pass down those props to the input field. You could consider doing it like this:
<TextField
sx={{ marginTop: 10 }}
inputProps={{ sx: {color: '#fff'} }}
/>
The SX prop in MUI V5
Try using the FilledInput component instead of TextField. Then you can use simple inline styling like this:
style={{color: 'white' }}
This also will lighten the placeholder text... hooray.
Give a classname to the textfield.
<TextField
className={styles.search_bar}
autoComplete={"off"}
InputProps={{
endAdornment: (
<Box className={'search_icon_container'} component={"span"}>
<IconButton>
<CiSearch fontSize={icon_default_size} />
</IconButton>
</Box>
),
}}
size={"small"}
placeholder="Search"
/>
Do this in your CSS file.
.search_bar div{
border-radius: 25px;
width: 45vw;
padding-right: 0;
}
It worked for me. :)
Output