How to remove styles of an Angular2 component?

Question

I am currently using ng2-smart-table. This component is actually have its own style :

[...]
selector: 'ng2-smart-table',
styles: [":host /deep/ *{box-sizing:border-box;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif}:host /deep/ button,:host /deep/ input,:host /deep/ optgroup,:host /deep/ select,:host /deep/ textarea{color:inherit;font:inherit;margin:0}:host /deep/ table{font-size:16px;line-height:1.5;color:#606c71;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;overflow:auto;word-break:normal;word-break:keep-all}:host /deep/ table tr th{font-weight:700}:host /deep/ table tr section{font-size:.75rem;font-weight:700}:host /deep/ table tr td,:host /deep/ table tr th{font-size:.875rem;margin:0;padding:.5rem 1rem;border:1px solid #e9ebec}:host /deep/ a{color:#1e6bb8;text-decoration:none}:host /deep/ a:hover{text-decoration:underline} /*# sourceMappingURL=ng2-smart-table.component.css.map */ "],
        template: "<table [id]=\"grid.getSetting('attr.id')\" [ngClass]=\"grid.getSetting('attr.class')\"><thead ng2-st-thead *ngIf=\"!grid.getSetting('hideHeader') || !grid.getSetting('hideSubHeader')\" [grid]=\"grid\" [isAllSelected]=\"isAllSelected\" [source]=\"source\" [createConfirm]=\"createConfirm\" (create)=\"create.emit($event)\" (selectAllRows)=\"onSelectAllRows($event)\" (sort)=\"sort($event)\" (filter)=\"filter($event)\"></thead><tbody ng2-st-tbody [grid]=\"grid\" [source]=\"source\" [deleteConfirm]=\"deleteConfirm\" [editConfirm]=\"editConfirm\" (edit)=\"edit.emit($event)\" (delete)=\"delete.emit($event)\" (userSelectRow)=\"onUserSelectRow($event)\" (editRowSelect)=\"editRowSelect($event)\" (multipleSelectRow)=\"multipleSelectRow($event)\" (rowHover)=\"onRowHover($event)\"></tbody></table><ng2-smart-table-pager *ngIf=\"grid.getSetting('pager.display')\" [source]=\"source\" (changePage)=\"changePage($event)\"></ng2-smart-table-pager>",
[...]

I would like to know if it is possible to specify in a template that I want to use this component with no style.

For instance something like that :

<ng2-smart-table [settings]="settings" [source]="source" (edit)="emitEdit($event)" noStyles></ng2-smart-table>

Answer 1

I encountered something like this, but the opposite, I needed my own styles.

The thing is that g2-smart-table is a library, is not your code per say.

So a solution would be to fork the repository in github, and in packages.json reference your forked repository instead of the original one.

And, obviusly, in the forked repository you remove the styles or do whatever you want.

Here you can find how to use a forked repository in your package.json:

https://coderwall.com/p/q_gh-w/fork-and-patch-npm-moduels-hosted-on-github

Option 2:

This would be nice for the community.

Still fork the original repository, create a directive [noStyles] that removes styles from the library's template and make a pull request.

This way, if it gets accepted, everyone who uses this library will be able to use your [noStyles] directive and benefit from it.