I would like to change the appearance of the autocomplete component provided by MaterialUi when it is disabled.
They propose, I imagine, borderBottom: dotted. I would like it to look like the select, also disabled, that I show in the following example.
https://codesandbox.io/s/xenodochial-shtern-7icn9?file=/src/playground.js
I don't know how is the correct way to overwrite the property proposed by MaterialUi.
Any ideas will be welcome.
Add in your main css (for overwrite a rule it must be imported after mui):
.MuiInput-underline.Mui-disabled:before {
border-bottom: 0;
}
Related
I have an Input component inside Form.item and input is disabled, I want input border to change color when error. How to do that?
You can change the default disabled border-color by adding the following css to your app:
.ant-input-status-error.ant-input-disabled,
.ant-input-status-error.ant-input-disabled:hover {
border-color: #ff4d4f;
}
You can take a look at this sandbox for a live working example of this solution.
Is there any way to target some components from react-bootstrap in CSS. For my application, I'm using Modals from react-bootstrap and I need to change some style on all of them and it will be annoying if I need to change every single one individually.
Yes, it is possible, however you will need to inspect the Modal using ChromeDevTools or the like and see what classes are applied to the Modal when it is displayed. For example, when I inspected the Modal from react-bootstrap, I noticed the styles applied to the heading were given the className of "modal-header". So I created a Modal.css file and added the following code to it:
.modal-header {
background-color: red;
}
Then, I imported "./Modal.css" into the Modal.js file or wherever you've defined or using your Modal. Finally, when I opened the Modal, the heading had a background of red color so to speak.
Please note that it can be a little difficult to override bootstrap styles sometimes.
I have an Antd checkbox that I'm trying to make larger, alter the thickness of the box itself and change the color to black but every style I apply creates a second square that sits over the checkbox and doesn't change the checkbox itself. Does anyone have any ideas on how to do this?
Figured this out by using &&&{border: 2px solid ${({ theme }) => theme.colors.black} the triple ampersand allows you to add more specificity when working with mixed styled components like mine.
My users are complaining that the change in color for md-buttons on focus is too subtle.
What is the right way to make an adjustment to this for the default color palettes?
Append: I am looking on how to adjust the button styling when the button has focus, not looking for how to create my own theme.
Also, I am using Angular-Material 1, NOT 2
OK, for anyone else looking for this, I found the answer in angular-material.modules.closure.button and angular-material.modules.js.button
.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover {
background-color: '{{primary-600}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused {
background-color: '{{primary-600}}'; }
This tells me what I needed, which is that focused buttons get primary-600.
NOW I can customized the theme palletes as recommended in the first comment
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle