I am using React Ant component. I would like to change the background color of Select.
I have followed the method from How to change the style of a Ant-Design 'Select' component?. It didn't work if the 'antd/dist/antd.css' was imported. However, it did change the background color of Select if 'antd/dist/antd.css' had not been imported.
How should I change the color with the import of 'antd/dist/antd.css'? The following is the code and css for react
AntdSelect.js
import React from 'react'
import { Select } from 'antd'
import 'antd/dist/antd.css';
import './antd.css'
const { Option } = Select;
function AntdSelect() {
return (
<div>
<Select
className="ant-select-selection"
style={{ width: 200 }}>
<Option value="Daily">Daily</Option>
<Option value="Weekly">Weekly</Option>
<Option value="Monthly">Monthly</Option>
<Option value="Yearly">Yearly</Option>
</Select>
</div>
)
}
export default AntdSelect
antd.css
.ant-select-selection {
background-color: green;
}
The objective is to change the background color to green:
Background green
The className which you're looking for is ant-select-selection-search
.ant-select-selection-search {
background-color: green;
}
SOLVING STEPS
Open up your inspector and point to the input.
See the className which governs the input. In this example, it's ant-select-selection-search
Change the background color in your css.
If you see no changes, add !important.
Related
How can I create a Button with hover effect I can't really get it and I have used bootstrap
Button Component:
import React from "react";
import "./button.css";
const Button = ({ title, colorStyle }) => {
return (
<>
<button type="submit" className={colorStyle}>
{title}
</button>
</> );
};
export default Button;
And import line is::
<Button title="Shop" colorStyle="bg-dark text-white" />
in your button.css add
button::hover {
css declarations;
}
Just use react-bootstrap components. The button of it already has a hover effect in default state: https://react-bootstrap.github.io/components/buttons/
Well, the hover effect has nothing to do with react. What you can do is rely on plain old CSS for this. The class that you have added on the button can use used to do this. Your code would look something like this if you wanted a background-changing effect.
bg-dark {
background: black;
}
bg-dark:hover {
background: red;
}
In the above example, your button's background colour will switch to red on hover.
Let me know if you have any follow up questions.
I want to change the color of disable state in mat-slide-toggle.
This is how slide toggle looking
This is my code
<div>
<mat-slide-toggle>Slide me!</mat-slide-toggle>
</div>
How can I change gray bg color?
In the root style.scss do a global style override (Not recommended normally) as follows. After you import the material theme
Ref: https://material.angular.io/guide/customizing-component-styles
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
....
....
.mat-slide-toggle-bar {
background-color: #e47171 !important;
}
Image Ref of style import
I am trying to change the background color of a react-bootstrap list group item.
My example.js file
import {classes} from "./Sidebar.module.css";
import ListGroup from "react-bootstrap/ListGroup";
import React from "react";
const Sidebar = () => {
return (
<div>
<ListGroup>
<ListGroup.Item className = {classes.Color} >Products</ListGroup.Item>
<ListGroup.Item>Stores</ListGroup.Item>
</ListGroup>
</div>
)
}
Sidebar.module.css file has
.Color{
background-color: red;
Even after giving a custom class name, the background color is still the default color.
If you want to change a default color use !important. Also remove curly braces when you load styles from Sidebar.module.css. Like this
import classes from './Sidebar.module.css';
.Color {
background-color: red !important;
}
I have given className as react-select-container and classNamePrefix as react-select. The styles described in the CSS is getting overwritten by the inbuilt style of the react-select. Image shows react-select__control styles is getting overwritten by the styles of some default class css-yk16xz-control of the react select. i want it to work the other way around and react-select__control styles stay on top and its styles get applied. any suggestions.
render() {
const titleOptions = [{value: 'Dr.', label: 'Dr.'}, {value:'Eng.', label:'Eng.'}, {value:'Officer', label:'Officer'}];
return (
<Select options={titleOptions} autoFocus className="react-select-container" classNamePrefix="react-select" />
)
}
Check Dom structure here
.react-select__control {
border: none;
border-radius: 3px;
}
if I set up a className for certain components like
<Segment className="Change" color='blue' inverted></Segment>
and in my css I use
.Change:hover{
background-color: black; //or any other change on hover
}
nothing is overriden on the hover.
I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?
After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
Working DEMO
Choose any color semantic-ui provide for example:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
Your button appears like:
You can add inverted props inside Button component that react semantic-ui provide
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
your component appears like:
On hover returns to basic style opposite of inverted
styled components usage with react semantic ui
I recommended you to use styled-components in order to override semantic-ui component style
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
Next use your new styled component instead of semantic-ui
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.
.Change:hover {
background-color: black !importanant;
}
To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.
UPDATE:
Try to remove color='blue' from the template and check if will work with and without !important rule.