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
Related
I want to override the default MUI CSS of the accordion component and I want to do this using the CSS module but problem is that the class is dynamically added by mui. Hence I cannot target that class directly.
I tried this below solution but it is not working:-
Css code:-
`.accordian_summary {
&:global(.MuiAccordionSummary-root) {
padding: 0px !important;
}
&:global(.MuiAccordionSummary-content) {
display: block !important;
}
}`
JSX Code:-
Accordian component code
DOM Tree structure and the class which I want to override
Browser code
*Note:- One of the CSS is getting applied i.e
`&:global(.MuiAccordionSummary-root) { padding: 0px !important; } `
but this is not working
` &:global(.MuiAccordionSummary-content) {
display: block !important;
}`
Please help if possible and Thanks for your help in advance.
Possible solution:
div[class*="MuiAccordionSummary-root"] {
display: block;
}
For example to change style for input error label:
label[class*="Mui-error"] {
text-decoration: underline;
}
is teher any chance to style my button inside tab in the css for vaadin-tabs component or i must do it by setclassname individually for button?
Accordin to this tutorial https://vaadin.com/docs/v14/flow/styling/styling-components
i tried:
vaadin-tabs vaadin-button{
background-color:red;
}
vaadin-tab > vaadin-button{
background-color:red;
}
[part="close-tab-btn"]{
background-color:red;
}
But none of it work. I`m importing my css by annotation:
#CssImport(value="./styles/components/tabs.css", themeFor = "vaadin-tabs")
and rest of my css looks like this:
[part="tabs"] ::slotted(vaadin-tab[selected]) {
color: var(--default-white-color);
background-color: var(--default-black-color);
}
[part="tabs"] ::slotted(vaadin-tab) {
color: var(--default-black-color);
background-color: var(--default-white-color-2);
border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;
MARGIN-RIGHT: 3px;
}
[part="tabs"] ::slotted(vaadin-tab[selected])::before{
background-color: var(--default-app-color);
width:100%
}
*edit
But if my component is inside of dom in my slotted component then i can somehow style it from my top layout. In this example i mean if i can style input-field of text-area inside vaadin-vertical-layout
From the looks of your screenshot, the vaadin-button is not inside any shadow root. In that case, you can style it from the global styles.
For example styles.css
vaadin-button.close-tab-btn {
background-color: red;
}
and importing it with something like
#CssImport("./styles/styles.css").
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.
I'm currently try to custom my QPushButton in Qt (PyQt in fact). So I set StyleSheet to do it.
But the problem is that I need to set this button to Default by setDefault to True.
And if I do that, I've a sort of color drool over ... how can I get rid of it?
Here is an example:
button = QPushButton('login')
button.setDefault(True)
button.setObjectName('login')
button.setStyleSheet(
"""
QPushButton#login {
background-color: #4caf50;
color: white;
border: none;
}
QPushButton:pressed#login {
background-color: #59b75c;
}
"""
)
Button appears green, but text is not fully white... I've try to set StyleSheet on QPushButton:default But it does not change anything at all
I can see you have a small error in your code. you gave us
QPushButton:pressed#login {
background-color: #59b75c;
}
but this does not work.
The correct way to do it is
QPushButton#login:pressed {
background-color: #59b75c;
}
also, be sure that after the '#' you use the objectName of the pushButton and not the text of the button.
Here is a link with some styleSheet examples
After long searches on the internet, I finally found how to do. I've to set outline to none to remove it.
QPushButton#login {
background-color: #4caf50;
color: white;
outline: none;
}
Then slobbery color disappear.
I have the following code to style custom scrollbars, but when the scrollbar is not needed because the content is not very long, I would like to hide the scrollbar. Is this possible?
Here's the code I have so far...
.myscroll::-webkit-scrollbar {
width: 15px;
}
.myscroll::-webkit-scrollbar-track {
border-radius: 3px;
background-color:#D4D4D4;
}
.myscroll::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color:#0085bf ;
}
Assuming that the element is having class myscroll, you can try following css
.myscroll{
overflow:auto;
}
It might solve your issue.