Am using PrimeReact DataTable in my React application.I have a requirement to change the background colour from white to grey in the DataTable..I tried custom style in the component. But not working..
Can you please help me?
If you want to override the style of the Datatable then use this css
.p-datatable-tbody tr {
background: gray !important;
}
or, in order to avoid !important
.p-datatable .p-datatable-tbody > tr {
background: gray
}
Related
How should I change initial background-color property from TextField from MUI component? Right now by default it looks like below:
But I want to have it white. When I use below class and add property of white
.MuiOutlinedInput-notchedOutline {
background-color: white;
}
But with this change it works in a way that whatever is typed is not visible
How I should correct it?
Antd buttons have a weird behavior where the text and border becomes blue ... even when I set the :focus and :hover to color: 'black'.
Is there any way to have hover events none similar to pointer-events: none ?
When I inspect element, it shows ant-click-animating-without-extra-node="false" when focused.
There is a by default class applied in Antd button (ant-btn) simply you need to give className to your button and style in global CSS
.adjust_button_hover_drawer.ant-btn:hover { border-color: white !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;
}
I am trying to customize the grid menu for angular ui grid
By default the menu icon appears in the top right corner of the table. But i want to show it on the top left corner of the table. How can i configure this?
Also I want to change the default icon to a customized one.
This is not something supported by the API, so you will have to do it by changing some of the CSS:
.ui-grid-menu-button {
left: -21px;
width: 20px;
}
.ui-grid-menu-button .ui-grid-menu{
left: -11px;
top: 27px;
}
To change the icon you will have to edit:
.ui-grid-icon-menu:before {
content:'\c363';
}
to whatever you want.
Can anyone have any idea how to make title text of groupbutton not above the icons but under in ExtJS? I was trying to do bbar to the groupbutton but the default td align is to left and I don't know how to change it by css? Thanks for any response.
You can achieve the effect by adding the following CSS to the button:
height: 64px;
background-position: top center;
padding-left: 0px
I this case, I have set the height of the button to be 64px. The will definitely distort the tool bar if you have a combination of default buttons and buttons with the above CSS.