So I'm using Ant Design UI library with my create react app which is making it difficult for me to edit the style of more complicated Ant Design components. Like the progress bar is by default blue:
I want to make it another color and when I look at HTML in the Chrome console I see:
The className for that element is ant-progress-bg. Is there any way I can write some code in my React component and update the style to be from style={width: "12.5%, height: 8} into style={color: 'red', width: "12.5%, height: 8}?
This is all the React code I need to write to generate the Progress bar using the ant design library:
import { Progress } from 'antd';
<Progress
percent={percentVotes}
showInfo={false}
status="active"
/>
I've also tried importing CSS and added an "ant-progress-bg" CSS class with the styling I want but it didn't do anything.
In my Matches.css file I have:
.ant-progress-bg {
color: red;
}
which I import into my Matches.js file with import './Matches.css';
Here is a demo https://codesandbox.io/s/k0m0nl1my3
If you want to change progress bar color for all places then override this class
.ant-progress-bg {
background-color: red !important;
}
And if you want to change color only for this specific progress bar, add some extra class like
.my-progress-bar .ant-progress-bg {
background-color: red !important;
}
If you are using less for your custom styles, it's even simpler
.my-progress-bar {
.ant-progress-bg {
background-color: red !important;
}
}
<Progress
percent={percentVotes}
showInfo={false}
status="active"
className="my-progress-bar"
/>
Related
How to change this default color into some other color in grapesjs?
You can change it using the CSS, using red as an example:
.gjs-one-bg { background-color: 'red' }
There is a lot of other classes you can alter as well, use Chrome dev tools to inspect them. Make sure to add !important if the styles don't apply.
You can change the default color by using setCustomCode function to set the css and then call render function.
editor.setCustomCode({
css: '.gjs-pn-commands { background: blue; }',
});
editor.render();
I am trying to style the MUI slider,so I decided to style it using the className prop. But the style applied to the main class does'nt get applied,while rest other styles like 'hover' state get applied. If I remove all the classes and just style it using SX prop,everything works fine. But I want to keep the styles seperate into an external css file.
Below is my code :
App.css
.container{
margin-left: 30%;
margin-top: 20%;
}
/* This does'nt get applied */
.slider {
color: #ff0000;
width: 300px;
}
.slider:hover {
color: #2e8b57;
}
.slider > .MuiSlider-thumb {
border-radius: 1px;
}
App.js
import "./App.css"
import * as React from 'react';
import Slider from '#mui/material/Slider';
export default function App() {
return (
<div className="container">
<Slider className="slider" defaultValue={30} />
</div>
);
}
The problem is with Material UI style injection order. The custom styles do apply, but Mui styles are injected before the custom style so they doesn't have effect in this case.
This guide explain how to change the injection order:
https://mui.com/guides/interoperability/#css-injection-order
I don't know if it is required, but I use css modules and material-ui. You can rename your css file to
App.module.css
then import like so
import styles from "./App.module.css"
you can then use it like
<Slider className={styles.slider} defaultValue={30} />
In Nextjs you can throw everything in styles.css to make it global, but I don't know if that is also for react as well.
I created a spinner component. I wanted it to be self-contained and not rely on external css, so in the component I include the scss to style it. The component template is a div with a class of sbl-circ. I can add this anywhere in my app and it works as designed.
Now, I created a second component (a button). I want to add the spinner component to this button. It works, but the spinner color is not correct for when it's inside the button.
So, I am trying to re-color the spinner with the scss for the button component. So far the only way it works is if I do
:host ::ng-deep {
button.btn.btn-primary {
.sbl-circ {
color: white;
}
}
}
I know that ::ng-deep is deprecated. What's the correct way for the button component to re-color any spinner components inserted inside of it?
Try using :host-context.
You should be able to use it like:
:host-context(button.btn.btn-primary) .sbl-circ {
color: white;
}
Excuse my unfamiliarity with angular. But if I were to attempt the resulting css to not be over-written by another style, I would try to use !important as a property value in the scss.
Example:
p {
color: red !important;
}
I'm using Ant Design (antd) components library for Vue.js.
The menu component is quite simple to use:
https://vue.ant.design/components/menu/
I just want to change the ":hover" color of links (from default blue to red), which is possible by overriding CSS classes.
But is very difficult to me (avoid using ugly workarounds) to change also the color of the "submenu arrow", which remains blue.
Here is a simple example:
https://codesandbox.io/embed/vue-antd-sub-menu-arrow-color-34vlx
Anybody has already tried?
Try with
.ant-menu-submenu-title:hover {
.ant-menu-submenu-arrow::before, .ant-menu-submenu-arrow::after {
background: red!important;
}
}
But use lang="scss" on your style tag so you can compile scss or just fix my script with css syntax.
Try this within the style tag:
.ant-menu-submenu-arrow {
::before {
background: red
}
}
So I have a very large stylesheet and I'm attempting to use it in my React code. I know typically you would use this format for styling in React:
transparentBg: {
background: 'transparent'
},
WhiteText: {
color:'white'
},
However, my css stylesheet looks like this:
.transparentBg{
background: transparent;
}
.WhiteText{
color:white;
}
Is there anyway to convert my entire CSS stylesheet into that React-style format? Or a way for me to just use the original CSS stylesheet without converting it?
Your CSS is still just CSS and React still just renders HTML elements on the page.
This means that you can add your large CSS file into html file and just add CSS classes / ids etc. that you define there to the elements in React.
So if you have
.transparentBg{
background: transparent;
}
.WhiteText{
color:white;
}
Then in your React components you can use these classes:
var SomeComponent = function () {
return <div className="WhiteText">
Foo Bar Baz
</div>;
};