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;
}
Related
I have two Components Login and Register with different separate styles.
// Login.jsx
import "../../Login.scss";
function Login() {
return (
<>
<div>Login</div>
</>
);
}
export default Login;
// Register.jsx
import React from "react";
import "../../Register.scss";
function Register() {
return (
<>
<div>Register </div>
</>
);
}
export default Register;
I have set different background color of both files, that is
// Login.scss
div{
background-color: red;
}
// Register.scss
div{
background-color: aqua;
}
I have rendered both components in App.js
but both the components have only one style applied i-e Register.scss even I have not imported it in Login.jsx but still in Login.jsx getting the style of Register.scss instead of Login.scss
what could be the possibl reason?
Can I apply same className styles by differentiating with different import paths?
This is due to the way that Cascading Style sheets work. The .div will adhere to the LAST style rule, as the file is read.
The post below contains the answer.
How to use the same name classes but in separate styles
I am working on Switch component with antd library. I would like to change background of switch, so I have following code:
import styled from 'styled-components';
import { Switch as SwitchhAnt } from 'antd';
export const Button = styled(SwitchhAnt)`
.ant-switch-checked {
background-color: red;
}
`
But switch background does not change at all. I know I can wrap this in some container and it will works but why something like that does not works?
As per how styled components work under the hood,
It creates a unique class name by hashing styles into a seemingly-random string, like dKamQW or iDwMsQ.
Then inject a new CSS class into the page, using that hashed string as its name, and containing all of the CSS declarations from the styles string. You can see that when you inspect switch that different style classes have been applied.
Normal antd Switch
Styled antd Switch
So here you don't need to add the class name used by antd. Just only need to add CSS properties that need to have like below.
export const Button = styled(SwitchAnt)`
background-color: red;
// ....... other styles
`
You can check example codesandbox in here.
You can also refer demystifying-styled-components and how-styled-components-works for more details about what styled components do under the hood.
I have a task when I need to extend the styles of a certain element. I take the basic styles through the module, and the additional ones will need to be done inside the function that will be in the component.
How can I extend the styles inside the component if I have already added styles from the module there?
import style from './styles.module.css';
const optionalStyles = {
margin: "30px"
}
<p className={`${style.subtitle} ${optionalStyles}`}>42</p>
<p style={optionalStyles} className={`${style.subtitle}`}>42</p>
You can:
Create another class inside your styles.module (or any other module) and add it conditionally:
import style from './styles.module.css';
<p className={`${style.subtitle} ${someCondition ? style.otherStyles : ''}`}>42</p>
Use inline styles:
import style from './styles.module.css';
const optionalStyles = {
margin: "30px"
}
<p className={style.subtitle} style={someCondition ? optionalStyles : {}}>42</p>
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.
import React, { Component } from "react";
import './navbar.css'
class NavBar extends Component {
render() {
return (
<div>
navbar stuff
</div>
);
}
}
export default NavBar;
If I were to import NavBar to another file and place it.
import React, { Component } from "react";
import NavBar from './NavBar'
import './randomfile.css'
class somefile extends Component {
render() {
return (
<div id="test">
<NavBar />
</div>
);
}
}
export default somefile;
How do I prevent the CSS to affect my navbar? I'm trying to work with components but I've fallen into a bunch of CSS on my components when I just want the CSS i have in my NavBar file
randomfile.css
#test div {
text-align: left;
}
^ Makes everything under div align to the left
it depends on how the other css files are written like if they use very general rules such as elements matches so there is no way to prevent 100%. However you can minimize the impact by using.
Follow BEM for your styles, http://getbem.com/, so your styles will be tighter and it is usually specific for your components.
Use css in js libraries like styled-components, https://www.styled-components.com/, this way your css rules will be very strong and it is often enough to rule other rules outside.
I my self used to use BEM before, recently I have adopted css in js and been using styled components for most of my projects recently and it works quite well.