I am using the Material UI autocomplete field (https://material-ui.com/api/autocomplete/#css) I have been able to modify everything my custom Autocomplete component has on its own root but not renderedInput of the variant style that is a filled TextField. Currently the class is as such:
.MuiAutocomplete-inputRoot[class*="MuiFilledInput-root"] {
padding-top: 19px;
padding-left: 8px;
}
I can affect the background color of inputRoot:{} but cannot remove these paddings at all. I only want this component to look this way since they add padding for the label above it.
Codebox
You need to match the specificity of the default styles in order to override it successfully. The default styles have a class selector plus an attribute selector. You can match this specificity by nesting the same attribute selector within your inputRoot class styles as shown below:
const CustomAutocomplete = withStyles({
inputRoot: {
backgroundColor: "white",
border: "solid",
'&[class*="MuiFilledInput-root"]': {
paddingTop: 0,
paddingLeft: 0
}
}
})(Autocomplete);
Related
Hello I am a react newbie and new to styling as well :)
I am trying to style the material-ui Button component with styled components
I am doing this by overriding global class names, I know material-ui introduced global class names like MuiButton-root etc
I am not clear on the use of "&" in parent selector, for example:
const StyledButton = styled(Button)`
&.MuiButton-root {
width: 500px;
}
.MuiButton-label {
color: ${props => props.labelColor};
justify-content: center;
}
`;
The above code works and can achieve the following:
The Button has a width of 500px
The label has a color of red (labelColor is passed in as a prop)
Please see sandbox below for full code
Question:
Why do I need "&" selector for the MuiButton-root, whereas for the MuiButton-label I don't?
Also is this the best way to style material-ui with styled components?
Please see the following sandbox: https://codesandbox.io/embed/practical-field-sfxcu
The '&' selector is used to target the classes and neighbouring elements/classes. Take a look at cssinjs. Its the underlying system behind MUI's styling.
But in short to answer your question;
const StyledButton = styled(Button)`
&.MuiButton-root { //this targets any class that is added to the main component [1]
width: 500px;
}
.MuiButton-label { //in css-in-js this is effectively '& .MuiButton-label [2]
color: ${props => props.labelColor};
justify-content: center;
}
[1] Targets main classes on component
<StyledButton className='test bob'> << this element is targeted
</StyledButton>
[2] Targets child elements either through class or element type. Note the space between & and the actual class.
<StyledButton className='test bob'>
<span className='MuiButton-label'>test</span> << this element is targeted instead
</StyledButton>
You can also use the element tag directly
span {
color: ${props => props.labelColor};
justify-content: center;
}
I'm looking to change the color of the backdrop of the Dialog component of Material UI using styled-components.
I found this thread on how to do exactly that but I'm not sure how to apply this to styled-components.
I currently haved a StyledDialog as such:
const StyledDialog = styled(Dialog).attrs({
classes: { paper: 'container' },
keepMounted: true,
'aria-labelledby': 'alert-dialog-slide-title',
'aria-describedby': 'alert-dialog-slide-description'
})`
.container {
border-radius: 0;
}
`;
<Dialog BackdropProps={{style: {backgroundColor: 'white'}}}/>
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Dialog/Dialog.js
You can reference the backdrop via its global class ("MuiBackdrop-root") in the following manner:
const StyledDialog = styled(Dialog)`
.MuiBackdrop-root {
background-color: lightgreen;
}
`;
Relevant Styled Components documentation: https://www.styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting
How does one reduce the amount of space between two Form.Item's in a Form?
for example in any of the antd form examples the spacing between a Form.Item is all the same and (to my eye) rather large.
You need to style the Form.Item component, for example with inline-style:
// The current form item is margin 15px top.
<Form.Item style={{ marginBottom: "0px" }}>
<Input />
</Form.Item>
Or the entire Form by overriding the css-class, for example with CSS-in-JS:
// Apply style to all form
const StyledForm = styled(Form)`
.ant-form-item {
margin-bottom: 0px;
}
`;
Demo:
Same can be achieved with .css file and importing it
First find the style that is achieving what you want to override, the override it by importing custom css. Your example:
.ant-form-inline .ant-form-item {
margin-right: 8px; // default is 16px
}
I am trying to add background-color through styled component.
If add the styles through style={} attribute it is working as expected but If I add the same style in my styled component file it is not working.
//this is working
<MyStyle style={{backgroundColor: '#fff' }}>
//some component here
</MyStyle>
//This is not working.
export const MyStyle = styled.div`
background-color: ‘#fff’;
`;
Can somebody point me here what I am missing here?
The first example is simply using the react style builtin, you don't need styled components to do this.
The code in the second example, you need to remove the quotes around the color, like this:
//This is not working.
export const MyStyle = styled.div`
background-color: #fff;
`;
Styled components takes css syntax, which unlike json syntax, does not have quotes around option names, color names, etc.
You don't have to put single quote around #fff
export const MyStyle = styled.div`
background-color: #fff;
`;
EDITED:
If there are overriding CSS styles that make your div's background not white just yet, and you can't find them, just add !important to this style
export const MyStyle = styled.div`
background-color: #fff !important;
`;
Regarding the issue about finding existing CSS styles that might be overriding your preferred style, take a look at this: https://www.styled-components.com/docs/advanced#existing-css
For instance, there is a label (without textfield!):
Ext.create('Ext.form.Label', {
id: "lb1",
height: 20,
html: "Title"
cls: 'cls1'
})
How can I change the background color dynamically without a CSS?
There are couple of ways to achieve that, but all of them use manipulate CSS.
1. Change css class on label
CSS classes
.cls1 {
background-color: #fff;
}
.cls2 {
background-color: #ccc;
}
ExtJS
label.removeCls('cls1');
label.addCls('cls2');
2. Change style on DOM Element
label.getEl().setStyle('background', '#CCC');
Good Luck!