I'm trying to remove gridlines from a basic table. Here is a codesandbox: https://codesandbox.io/s/rdg-cell-editing-u2ood.
How do I do it? Do I need to manually override internal css classes or is there a props to do this?
Seems like there is no props to remove the border. You can do this by overriding the border attributes of class .react-grid-Cell .
You need to use CSS to remove border, there is no props to do it.
.react-grid-Cell {
border: none;
}
Demo
Related
Using Mui styled function to style both jsx elements and MUI components. The displayName is not showing when I debug the element in Chrome or any browser for that matter.
Anyone know how to fix this.
I'm using Vite for my setup.
const MyComponent = styled('div')`
display: flex;
`;
As you can see from the below screenshot its not showing MyComponent display name instead its showing css-1vht943
You can see class only inside the Element tab. When you click on one of the lines which contains the class name.
You can find all the CSS related to that class under the styles tab including display name for your case. Please check the image below
If you want to have a name I think you can use styled('div', { name: 'MyTheme'}), then you will see something like <div class="css-t7mscw-MyTheme-root"></div>. Don't know if this is what you want, but here it is vaguely mentioned in the doc.
I am new to PrimeNg with Angular. I have a simple primeng p-inputnumber component as below:
<p-inputNumber
[showButtons]="true"
[placeholder]="placeholderText"
incrementButtonIcon="fal fa-plus"
decrementButtonIcon="fal fa-minus"
[minFractionDigits]="_config?.integer ? 0 : 1"
[min]="_config?.minValue"
[max]="_config?.maxValue"
[(ngModel)]="value"
(onBlur)="onBlur()">
</p-inputNumber>
And have created a wrapper to this component i.e is the wrapper to the above component and using it in a homepage component. Now i want to apply style to this wrapper component which in turn should apply style to primeng component. Right now it is not setting.
Homepagecomponent.html
---<app-number-input class="disabled">
------<p-inputNumber>
i set the below style in homepagecomponent.scss
:host ::ng-deep .disabled {
background: red;
}
But the above is not being set. Can anyone help me how to achieve my expected?
Thanks
You would need something like this in your CSS
:host ::ng-deep {
// you may want to specify your app element or something here to be more specific than just .disabled class
.disabled {
// tweak this list to whichever pieces of the p-inputnumber you want to have red background
.p-inputnumber,
.p-inputnumber-stacked,
.p-inputnumber-horizontal,
.p-inputnumber-vertical,
.p-inputnumber-input,
.p-inputnumber-button,
.p-inputnumber-button-up,
.p-inputnumber-button-down,
.p-inputnumber-button-icon {
background-color: red;
}
}
}
I'm using ag-grid-react like this:
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
and declares it like this in render(some details removed for clarity):
return <div className="MarketGrid ag-theme-balham" >
<AgGridReact domLayout='autoHeight'
enableCellChangeFlash={true}
rowSelection={'single'}
onSelectionChanged={this.onSelectionChanged.bind(this)}
onGridReady={this.onGridReady.bind(this)} />
</div>;
the "enableCellChangeFlash" property works fine, and I know how to change the color of it, but what if I want to change the color depending on whether the new value is higher or lower than the previous?
My update code looks somewhat like this:
let row = this.gridApi.getRowNode(this.props.productIds.indexOf(id));
for (var f in data) {
row.setDataValue(f, data[f]);
}
}
I guess I should set the cell style somewhere, but I'm not sure where.
UPDATE: According to this page https://www.ag-grid.com/javascript-grid-data-update/#flashing I should do this:
"If you want to override how the flash presents itself (eg change the background color, or remove the animation) then override the relevant CSS classes."
Anyone knows how to do this?
I almost got this now. The answer I found out is based on CSS. Set the classname for blinking/stop-blinking like:
return (<div key={Math.random()}
className={some logic to set classname here, like "blink-red" or "blink-blue"}
onAnimationEnd={() => this.setState({ fade: false })}
> {this.state.value} </div>);
and use onAnimationEnd to set some state variable that will affect that logic.
Then add the fading logic like this to CSS:
.blink-red {
animation: redtotransparent 3s ease 5s;
}
#keyframes redtotransparent {
from {
background-color: red;
color: white;
}
to {
background-color: transparent;
color: black;
}
}
It's still not perfect, but almost there. Changing the key makes React think the DOM has changed. When I come up with anything better I will add it here.
Click on the Flashing Cell option in the dropdown at the top and then you can choose a different color for an up change and a down change. you can also set how long it will flash for.
I noticed most form elements in the Reactstrap documentation have a PropType of a cssModule. I would assume that means I could override the default Reactstrap styles and do something like this:
Formtext.module.css
.formtext {
background-color: blue;
border: 2px solid black;
margin: 10px;
}
SimpleForm.jsx
import styles from "./Formtext.module.css";
...
<FormText cssModule={styles.formtext}>
This is some placeholder help text...
</FormText>
```
However, this doesn't seem to work. Checking my react dev tools the cssModule prop evaluates to undefined.
I'm using Using Reactstrap 5.0 and create-react-app 1.1.5
Is there something I'm unaware of that I need to do?
Do I need to eject to be able to use css-modules?
Can someone point me to an example of how to use the Reactstrap's cssModule prop correctly?
For reference here is the proptypes definition from Reactstrap docs
FormText.propTypes = {
children: PropTypes.node,
inline: PropTypes.bool,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'small'
color: PropTypes.string, // default: 'muted'
className: PropTypes.string,
cssModule: PropTypes.object,
};
On cssModule
It looks like cssModules doesn't behave quite like you would think; the prop doesn't take a single, overriding class - it takes a rejected class and a replacement class.
Reactstrap uses mapToCssModules to get this done. See its documentation here. Take note of the usage example:
<Example tag="div" cssModule={{ 'w-100': 'w-75' }} />
So your case would look something like this:
<FormText cssModule={{ 'form-text' : styles.formtext }} />
This will completely surpress the 'form-text' class though (which in your case, only contributes display: block. If you'd like to override more selectively, see below.
Try this instead
In the FormText source code, it looks like you may be able to do your overrides in a different way:
If you want to omit the form-text class altogether, include inline as a prop,
If you want to omit any color-related bootstrap classes, set 'color' to false (or something falsy),
set the className prop to your CSS Module object (styles.formtext).
<FormText className={styles.formText} color='' inline>
Test formtext
</FormText>
The most important part here is actually the className prop. You can also further override styling by including a tag prop (again, check the FormText docs).
Hope this was helpful! Happy holidays! 🦃🎅
I did not really get the accepted answer, but I had the same problem recently and in my opinion, cssModule behaves exactly as one would expect.
You just pass an imported module object and then specify classes they will be referenced towards the module.
Here is my example (from create-react-app) how I did fix Navbar to get it's bootstrap styles from my bootstrap module (as I don't import bootstrap globally):
import cx from 'classnames';
import bootstrap from 'bootstrap/dist/css/bootstrap.css';
import navbar from './navbar.css';
let styles = Object.assign({}, bootstrap, navbar);
public render() {
return (<Navbar cssModule={styles} className={cx(styles.navbarExpandSm, styles.navbarToggleableSm, styles.borderBottom, styles.boxShadow, styles.mb3)} light>[your menu here]</Navbar>);
}
This simply says the control to take the styles module and reference all the class names passed in classNames towards it. If you take a look at the mapToCssModules method, it is exactly what it does.
https://github.com/reactstrap/reactstrap/blob/d3cd4ea79dcaf478af5984f760ff1290406f62a5/src/utils.js#L53
In my case, it allows the control to pick up the original bootstrap styles and I can override what I need in my own module.
I'm using mdDataTable to display data retrieved form Server. Is there a possibility to change the css class of mdt-row? If I try to add a class, mdDatatable overwrites it
in your own css file, you can override the css by explicitly targetting the angular md classes, like this:
.mdt-row {
{overridesettingname}: {newsetting};
}
But I'd be careful because that overrides site-wide. You can override just a single page by targeting a parent element on the page, like:
.{mypageclassname} .mdt-row {
{overridesettingname}: {newsetting};
}
Another note, make sure YOUR css file is loaded AFTER the angular css file(s).
You can explore the classes and ids for the element in the developer tool, It is easy to add style for all elements, Here I've added sample styles you can keep added as you wish. Hope it helps.
.mat-table {
overflow: auto;
max-height: 700px;
}
.mat-header-cell .mat-sort-header-sorted {
color: #0A0A0A;
}
md-pagination-wrapper {
width:auto !important;
}
md-row:nth-child(even){
background-color:#EDF1F5;
}
md-row:nth-child(odd){
background-color:#FDFDFB;
}