This is a great component - just wondering if there's a simple way to apply css styles to the actual input element? e.g. to set the background colour via a prop
You can use inputProps to apply props directly to the input component:
<Typeahead
...
inputProps={{
className: 'my-custom-classname',
style: {
'backgroundColor': 'red',
}
}}
/>
Related
I have a custom spinner that is currently using keyframes like so:
import { keyframes } from "#mui/system";
...
const keyframeSpinner = keyframes`
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
`;
...
<Box
sx={{
animation: `${keyframeSpinner} 1s linear infinite`,
}}
/>
...
I don't want to import #mui/system and I don't want to use styled components.
So, I'm trying to find a solution where I can uses pure css or another solution that I'm unaware of.
You can easily apply in-line CSS styles to components using emotion, which is also used by MUI.
For example, here is the css prop from emotion being used to customize background-color and hover on a div. The code you write in the css prop can be pure CSS.
import { css, jsx } from '#emotion/react'
const color = 'darkgreen'
const customCss = css`
background-color: hotpink
&:hover { color: ${color} }
`
render(
<div css = {customCss}>
This div has a hotpink background.
</div>
)
I'm trying to style material-ui DataGrid component to justify the content in the cells. I am reading the material ui docs about styling but I don't seem to doing it correct and frankly find the docs on styling very confusing.
The doc here: https://material-ui.com/customization/components/#overriding-styles-with-classes implies I should be able to do something like this:
const StyledDataGrid = withStyles({
cellCenter: {
justifyContent: "center",
},
})(DataGrid);
<div style={{ height: 300, width: '100%' }}>
<StyledDataGrid rows={rows} columns={columns} />
</div>
However, when I do this, I don't see the style being added to the MuiDataGrid-cellCenter DOM element. Attaching a screenshot which shows the element classes. In the inspector I see that the style isn't being added (and if I add it manually I get the desired results). Am I not using the withStyles function correctly?
So after a bit more messing around, I believe the issue is that the DataGrid component does not support the classes property (which it seems most of the material ui components do). I believe the withStyles usage about is shorthand for passing the classes via the classes prop. Since the prop isn't listed in the API https://material-ui.com/api/data-grid/ I'm assuming this is why it isn't working. I confirmed that I can get the styles working by using a combination of the className parameter with descendant selection.
If someone determines I'm wrong and there is a way to get withStyles working on this component please comment.
const useStyles = makeStyles({
root: {
"& .MuiDataGrid-cellCenter": {
justifyContent: "center"
}
}
});
...
export default function X() {
const classes = useStyles();
return (
...
<DataGrid className={classes.root} checkboxSelection={true} rows={rows} columns={columns} />
...
)
}
ALTERNATIVE SOLUTION: (for others with similar issues)
If you are working within a class and cannot use hooks...
<div>
<DataGrid
rows={rows}
columns={columns}
sx={{
'&.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}}
/>
</div>
Instead of doing this everywhere:
<Button variant="contained" color="primary"
style={{textTransform: "none"}}
>
Description
</Button>
I just want to write:
<Button>
Description
</Button>
Can I use theme overrides to do this and what would that look like?
Note that I'm trying to override both Material-UI properties and CSS styles. I want to do this globally (i.e. not using withStyles() stuff everywhere).
Or can this only be done by defining some kind of new AppButton component?
Currently using material-ui 3.2.2
You can do this with global overrides for your theme.
Documentation is here https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type
Doing it this way will still allow you override the variant on a per component basis as well.
const theme = createMuiTheme({
props: {
// Name of the component ⚛️
MuiButton: {
// The properties to apply
variant: 'contained'
},
},
});
Here's an alternate way to do this, without defining a new component.
Custom components can be awkward when used with Material-UI's JSS styling solution with Typescript. I've found it difficult to define WithStyle types when combining style types from the shared component and the thing using it.
Instead of defining components, it's possible to define sets of default properties that you then apply with the spread operator.
Define and export a standard set of shared props somewhere out in your app:
import {LinearProgressProps} from "#material-ui/core/LinearProgress";
export const linearProps: LinearProgressProps = {
variant:"indeterminate",
color:"primary",
style:{height:"2px"},
};
Then use those props in your app:
<LinearProgress {...linearProps} />
This is then easy to override with custom properties, custom inline styles or JSS generated styles:
<LinearProgress {...linearProps} className={classes.customProgress}
color="secondary" style={{...linearProps.style, width: "100%"}} />
For anyone finding this question, assuming there is no Material-UI way to do this, here's my custom button component.
import * as React from "react";
import {Button} from "#material-ui/core";
import {ButtonProps} from "#material-ui/core/Button";
export class AppButton extends React.Component<ButtonProps, {}>{
render(){
let {style, ...props} = this.props;
return <Button {...props} variant="contained" color="primary"
style={{...style, textTransform: "none"}}
>
{this.props.children}
</Button>
}
}
AppButton.muiName = 'Button';
I am having a hell of a time trying to understand how to change the styles for a one time use of TextField
The docs really don't make any sense to me
<FormControl>
<InputLabel
htmlFor="mobile-number-input"
>
Mobile Number
</InputLabel>
<Input
value={this.state.mobileNumber}
onChange={this.onMobileNumberChange}
fullWidth
classes={{
inkbar: {
'&:after': {
backgroundColor: 'white',
}
}
}}
id="mobile-number-input"
/>
</FormControl><br />
But I get this error
Warning: Material-UI: the key `inkbar` provided to the classes property is not valid for Input.
You need to provide a non empty string instead of: [object Object].
You need to override inkbar with the name of another class, not a JSS object.
One way of doing this is to declare your JSS object outside of the component and use the withStyles higher-order component to provide your component with a classes prop that maps the class names defined in JSS to their actual names:
import { withStyles } from 'material-ui/styles';
const styles = {
inkbarOverride: {
'&:after': {
backgroundColor: 'white',
}
}
};
const Test = ({ classes }) =>
<FormControl>
<InputLabel
htmlFor="mobile-number-input"
>
Mobile Number
</InputLabel>
<Input
value={this.state.mobileNumber}
onChange={this.onMobileNumberChange}
fullWidth
classes={{
inkbar: classes.inkbarOverride,
}}
id="mobile-number-input"
/>
</FormControl>
export default withStyles(styles)(Test);
Refer to Overriding with classes for more information.
I what to change color of label and text in TextField component.
I am using material-ui#next.
and docs from 0.15 does not work ( I have checked it) .
Can someone give me short example how to override floating label? ( not changing general theme ! )
thanks
From the documentation, when you have a TextField it is, in fact, an abstraction component of several smaller components
Advanced Configuration
It's important to understand that the text field is a simple
abstraction on top of the following components:
FormControl
- InputLabel
List item
Input
FormHelperText
Blockquote
If you wish to alter the properties applied to the native input, you can do as follow:...
In your TextField you can pass props for the Input and Label as follow:
<TextField
defaultValue="react-bootstrap"
label="Bootstrap"
InputProps={{
disableUnderline: true,
classes: {
root: classes.textFieldRoot,
input: classes.textFieldInput,
},
}}
InputLabelProps={{
shrink: true,
className: classes.textFieldFormLabel,
}}
/>
this is taken from the last example given in this page.