There is an unexpected blue border when I type text. Please check the image. I tried editing control styles by setting border zero or none and even removed boxShadow. But nothing works. Please check the image.
control: (provided) => ({ ...provided, boxShadow: 'none', border: 0, }),
I found the issue. I was using one tailwind plugin tailwindcss-forms. It overrides the default behavior of some inputs. So there are 2 solutions to this.
Remove plugin from tailwind.congif.js file. Bascially remove this line require('#tailwindcss/forms').
If you want to keep this plugin. Add this into your parent css file. e.g. index.css. input[type='text']:focus { box-shadow: none; }
If you want to specifically modify react-select input style while keep using the tailwindcss-forms, you can use classNamePrefix props.
<Select
classNamePrefix="select2-selection"
...
/>
Then in your index.css file, add this:
.select2-selection__input:focus {
box-shadow: none;
}
This will change the input style specific for react-select component.
Related
I am working on displaying a report using a tree table component from ant design.
I would like to make the bottom border of the collapsed parent or of the last expanded child in order to split the report into it's sections.
Current Situation Vs. Desired Effect
Ideally I need a way to set the css class name through an attribute in the table data source.
All border attributes will not work at the level. They must be on the level. So, just giving a class name that modifies the border to a row won't work.
A workaround would be to set a class name using the Antd "rowClassName" prop (this can be set to a function that dynamically returns the class names).
Then, assign the following classes:
.highlight-bottom-border > td {
border-bottom: solid 1px black !important
}
.highlight-top-border > td {
border-top: solid 2px black !important;
border-bottom: solid 2px #6d9eff !important
}
By doing so, the level is modified resulting in a more defined border.
you can customize the className in JSX tags and add css property
You can find the target className in the inspection
.customizeClassName { :global {
.targetAntdClassName {
border: none
} } }
im trying to disable a shadow in the Drawer from antd components, what im trying to disable is the shadow, i already disable the mask but i cant find way to disable the shadow, here is the shadow
i already tried BoxShadow inside the maskStyle and i cant find any solutions to this probles
You need to add this css to hide drawer box-shadow:
.ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper {
box-shadow: none
}
.ant-table .ant-table-container::before,
.ant-table .ant-table-container::after {
width: 0px !important;
}
I want to use the primary color from the ant design theme. I believe the less tag is: #primary-color . How do I use this value for a custom div that I want the border color to match? Also this is with an app made by create-react-app.
I want to be able to do something like:
border: '2px solid #fff' // Instead of white, it uses the theme's primary color
In the very top of your .less file import Ant Design styles: #import '~antd/dist/antd.less';
And then you can use any antd color variable:
#import '~antd/dist/antd.less';
.box {
border: 2px solid #primary-color;
}
in my app.css file, I have got a class for header and components color value.
I am using css not sass or scss.
.header-class {
color: #1100aa !important;
}
and I want to change the color in theme setting in my frontend dialog.
How can I do this?
Define a ui for the panel, see https://docs.sencha.com/extjs/7.0.0-CE/modern/ext.Panel.html .css_mixin-panel-ui
#include panel-ui(
$ui: 'dialog',
$header-font-weight: normal,
$header-padding: 5px 7px,
$header-min-height: 46px,
$header-min-height-big: 46px,
$header-background-color: #3a3a3a,
$header-padding-big: 0 10px 0 0,
)
For instance, there is a label (without textfield!):
Ext.create('Ext.form.Label', {
id: "lb1",
height: 20,
html: "Title"
cls: 'cls1'
})
How can I change the background color dynamically without a CSS?
There are couple of ways to achieve that, but all of them use manipulate CSS.
1. Change css class on label
CSS classes
.cls1 {
background-color: #fff;
}
.cls2 {
background-color: #ccc;
}
ExtJS
label.removeCls('cls1');
label.addCls('cls2');
2. Change style on DOM Element
label.getEl().setStyle('background', '#CCC');
Good Luck!