!Important in CSS?

Is there any particular reason why !important seems to be used in a fair few places in the CSS code? It's making it very difficult for me to customise the layout.

As an example.

@media (max-width: 768px)


.ui-datatable-reflow .ui-datatable-odd > td, .ui-datatable-reflow .ui-datatable-even > td {

1. display: block;
2. width: 100% !important;
3. text-align: left !important;
4. border: none;

This is the CSS used as part of the Radzen Datagrid (when zoomed in enough for collapsable menu's etc)

I'm trying to customize this to remove the display block, width setting and default text-align. However to do that I'm having to proliferate !important all over my own CSS which shouldn't be neccessary.

Is this just a design oversight? Or is this intentional.

Yes, this is intentional - it overrides the default setting to make it better looking on a mobile device. Feel free to edit the CSS and remove everything you don't want. Then include a local copy of the CSS file.