I'm trying to update Radio Button colors of an ant design radio mentioned in this link in my REACT App.
I tried using the suggestion in this post to update the colors.
But my colors are not updating. I am not sure what I'm doing incorrectly here.
Also, Its a REACT project and my package.json has a dependency for "antd": "^4.5.0"
and the import for antd.css exists in app.tsx like this
// Global styles
import "antd/dist/antd.css";
This is a code I have in one of the component files of the project.
File name: MyRadio.tsx
import { Radio } from "antd";
import styles from "./mystyles.module.scss";
return (
<Radio.Group
className={styles.toggle}
>
<Radio id="RDC" value="C">
C
</Radio>
<Radio id="RDI" value="I">
I
</Radio>
</Radio.Group>
);
Here is how mystyles.module.scss looks like:
.toggle {
width: 244px;
background: #ffffff;
border: 1px solid #d9d9d9;
box-sizing: border-box;
display: flex;
align-items: center;
float: left;
}
/* Followed suggestion from other post but didnt see colors updating, when I un-comment the following code
.ant-radio-checked .ant-radio-inner {
border-color: red !important ;
}
.ant-radio-checked .ant-radio-inner:after {
background-color: red;
}
.ant-radio:hover .ant-radio-inner {
border-color: red;
}
*/
Update 1
You need to override the below classes. It should work. Use !important only if your css is overridden by the existing classes.
You need to import "antd/dist/antd.css"; to get these in the console and then override the css
https://codesandbox.io/s/nameless-dream-4ojr4
.ant-radio-inner:after {
background: red !important;
}
.ant-radio-checked .ant-radio-inner,
.ant-radio:hover .ant-radio-inner,
.ant-radio-wrapper:hover,
.ant-radio-input:focus .ant-radio-inner {
border-color: red !important;
}
Edit - Included the codesandbox link and the hover css
I can not write comment (too low reputation), so i will write an "answer". You can try to change theme of ant-design https://ant.design/docs/react/customize-theme (This default blue color is primary one). However it requires some changes and new color will be applied globally, so its not too good for existing big projects.
Related
I have two components called GroceryItem and BasketItem. Since these components share quite a few styles and I didn't want to write the same properties in different stylesheets, I set up a stylesheet called _item-layout.scss that has all the common styles and then imported this in both BasketItem.scss and GroceryItem.scss.
The core difference between these components is that the BasketItem icon is meant to switch from white to red when the enclosing div is hovered upon, whereas the GroceryItem icon is meant to switch to green. To enable this functionality, I set the hover property to change colour in the BasketItem and the GroceryItem stylesheets.
The thing is, both components change icon colour to red when hovered on. This is especially confusing for me because in my GroceryItem.js file, I've only imported GroceryItem.scss. So how can it match a selector that isn't even present in the stylesheet that has been imported?
item-layout.scss:
.root {
background-color: rgba(230, 230, 230, 1);
margin: 10px 0px;
user-select: none; //standard syntax
-webkit-user-select: none; //webkit (safari, chrome) browsers
-moz-user-select: none; //mozilla browser
-khtml-user-select: none; //webkit (konqueror) browser
-ms-user-select: none; //IE10+
.p {
font-weight: 500;
}
}
.icon {
margin-right: 10px;
color: whitesmoke;
}
.row-content {
display: flex;
padding: 15px;
}
GroceryItem.scss:
#import "./../../styles/_item-layout";
.root:hover .icon {
color: green;
}
BasketItem.scss:
#import "./../../styles/item-layout";
.root:hover .icon {
color: red;
}
GroceryItem.js:
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faPlusSquare } from "#fortawesome/free-solid-svg-icons";
import "./GroceryItem.scss";
import React from "react";
function GroceryItem(props) {
return (
<div className="root" onClick={props.onClick} >
<div className="row-content">
<FontAwesomeIcon icon={faPlusSquare} className="icon"/>
<p>{props.title}</p>
</div>
</div>
)
}
export default GroceryItem;
I think the problem is that you have hover styles for the root class and you're using this class in both components.
If you import BasketItem.js or GroceryItem.js, their respective scss files will also be imported. Each of these scss files sets the color of elements with class root on hover to either red or green. So whichever js file is imported last will indirectly decide the root class hover color.
Since you say both components have a red hover color BasketItem.js is probably imported after GroceryItem.js based on the code in your question. If you switch the import order around you will probably see both components turn green.
The simple solution here is to just use separate classes for GroceryItem and BasketItem so there is no collision / involuntary overwriting of styles.
Both declarations of icon styles are in the same scope so the last loaded scss file overwrites the first one.
You could add an additional classname in both components and use them as a kind of color flag. Lets say in first component you add the css classname green next to your icon classname and in the second one add red next to your icon classname. So you have:
... className="icon green" ... and
... className="icon red"
In you main scss file you do
.root {
.icon {
&:hover {
&.green {
color: green;
}
&.red {
color: red;
}
}
}
}
Of course add the other styles you have set for your root class
I am using react to build simple app, and using Materilize css. In my UserProfile Component class importing UserProfile.css import "./UserProfile.css.
/* UserProfile.css */
.custom-class {
margin-top: 30 !important;
color: pink;
}
UserProfile in render method have
<h1 className="custom-class">Title</h1> // Margin is not applyed, but color is pink
I have an option to
<h1 style={{ marginTop: 30, color: "pink" }}>Title</h1>
this works fine, but I prefer style code in css files.
I am not sure maybe that issue has no relation to overriding.
you should use px in css files, change your code to margin-top: 30px !important; and it should work.
And if you want to check overriding issues in css, you can inspect your code(with right click your browser and choose inspect) and check if its crossed or not.
You'll need to use camelCase for your classname, so .customClass instead of .custom-class.
Then your import statement should look like:
import css from './UserProfile.css`;
and in your component:
<h1 className={css.customClass}>Title</h1>
Read up on CSS Modules for more information.
You don't have a unit for margin-top in your css class
.custom-class {
margin-top: 30px !important;
color: pink;
}
I've been digging through the Ant-Design node_module trying to change the default color and default width of an active tab but have had no luck. Anyone know how to override it?
The problem is that I don't know which element has the border to begin with. Any help is very welcomed.
you can go with:
.ant-tabs-tab.ant-tabs-tab-active {
border-bottom: 2px solid #BF2D30 !important;
z-index: 2;
}
UPDATE
This style will do as expected.
.ant-tabs-ink-bar {
height: 5px;
background: red !important;
}
Check https://pro.ant.design/docs/style#Override-the-component-style on how to override style .
Refer dis answer too Antd: How to override style of a single instance of a component
To figure out on what needs to be changed on your own, Inspect the element in browser.
You need use tabBarStyle props.
See docs: https://ant.design/components/tabs/
I solve this problem with this code:
import './styles.less';
const [tabIndex, setTabIndex] = useState('0');
const borderClass = ['redBorder', 'greenBorder', 'blueGreyBorder'];
<Tabs
className={`tabs ${borderClass[tabIndex]}`}
defaultActiveKey={tabIndex}
onChange={onSetTabIndex}
>
// And in the styles.less:
` .tabs {
margin-top: 17px;
width: 100%;
}
.redBorder{
.ant-tabs-ink-bar {
background-color: #e94747;
}
}
.greenBorder{
.ant-tabs-ink-bar {
background-color: #24ad52;
}
}
.blueGreyBorder{
.ant-tabs-ink-bar {
background-color: #5b708b;
}
}`
with the state we can change the class and use the cascade css to solve our problem
I want my loadingController wrapper to be shown with a customized css style but the css's rules doesn't apply to the element (the loadingController wrapper).
I have this in my component:
ionViewDidLoad() {
let loader = this.loadingController.create({
spinner: 'bubbles',
content: 'getting data...',
cssClass: 'loadingwrapper'
});
loader.present().then(() => {
//some stuff
...
loader.dismiss();
});
}
and this in my css file:
.loadingwrapper{
width: 77% !important;
height: 15% !important;
color: black !important;
font-size: 1.25em !important;
background-color: aliceblue !important;
border-radius: 10px !important;
}
In spite of doing this (I've even tried whithout "!important"), the changes (none of them) doesn't apply to the loading wrapper and it shows a bit awful.
Not sure where you are applying the css but if you are applying the css in the page component file you going to have a hard time, because the loading controller sits outside the page selector. So if your page component name is Foobar and you have a .scss file foobar.scss
page-foobar{
.loadingwrapper{
// not going to work
}
}
you can either add it globally to your app/app.scss file or ( i think this will work )
.md,.ios,.wp{
page-foobar{
.loadingwrapper{
// styles!
}
}
}
You have to do it globally inside the variables.scss file.
Android
$loading-md-border-radius:10px;
ios
$loading-ios-border-radius: 10px
Windows
$loading-wp-border-radius: 10px
You can see global variable list here.
I'm trying to change the style of the md-dialog.
in my main.scss i'm importing the prebuild pink-bluegrey theme...
then in my component I import the following -->
#import "#angular/material/dialog/dialog.scss";
$mat-dialog-padding: 0;
$mat-dialog-border-radius: 0.5rem;
$background: #ffffff;
#mixin mat-dialog-container {
padding: $mat-dialog-padding;
border-radius: $mat-dialog-border-radius;
background: $background;
}
#include mat-dialog-container;
The padding and border radius is correctly applied to the dialog window.
But the background is not working... also tried the !important statement.
I'm using this in a single component...
Is there also a change to apply those styles globally?
in chrome dev tools I see those applied style changes. The background gets overwritten by the pink-bluegrey theme..
hope anyone can help.
thanks
It is better practice to add a wrapper class around your dialog, and then add styling to the children. Have a look at this article for more information.
When you open your Angular dialog, you can add a panelClass
attribute, like this:
this.dialog.open(MyDialogComponent, {panelClass: 'my-panel'}).
then, in your css (e.g. in the root styles.css file), you can add the following:
.my-panel .mat-dialog-container {
overflow: hidden;
border-radius: 5px;
padding: 5px;
}
EDIT Warning
It is also possible to add the css to another file than the root styles.css, but then you have to use ::ng-deep in the css (e.g. ::ng-deep .my-panel{ // ... }). This is not advised, as ::ng-deep is deprecated in Angular
EDIT2 Good alternative
If you are using scss, then you can place your .my-panel-style in your mydialog.component.scss file, by using a #mixin, and #import the file in styles.scss. You can then use #include to load the defined mixin.
in your mydialog.component.scss file
#mixin myPanel(){
.my-panel .mat-dialog-container {
// css here
}
}
in your styles.scss
#import 'path/to/mydialog.component.scss' // you don't need the .scss suffix
#include myPanel();
I solved this problem by including this css block in the end of file material2-app-theme.scss
.mat-dialog-container {
overflow: hidden !important;
border-radius: 5px !important;
padding: 5px !important;
}
can you use css then change background in mat dilog, at i used color transparent
mat-dialog-container {
padding: 0px !important;
background: transparent !important;
}