rsuite / rsuite-table

A React table component.
https://table.rsuitejs.com/
MIT License
727 stars 132 forks source link

No Styling for Table. #350

Open thecodingrasta opened 2 years ago

thecodingrasta commented 2 years ago

Versions

package version
react 17.0.2
remix-run 1.4.0
rsuite-table 5.6.0

What is the expected behaviour?

The ability to replicate the Usage Example and have a working data table.

What is the current behaviour?

The table renders to the screen but without any styling. I have not imported the styles from the index.less or rsuite-table.css, but evem when I try to it does not work. There should be a way for the module to function without these...

What are the steps to reproduce?

Create a new Remix app with 'npx create-remix@latest' Add this module to the program Attempt to follow the Usage instructions without including the reference to the index.less or rsuite-table.css The data is displayed as such:

image

And my code is:

image

Any additional comments? (optional)

simonguo commented 2 years ago

https://github.com/rsuite/rsuite-table#usage

thecodingrasta commented 2 years ago

https://github.com/rsuite/rsuite-table#usage @simonguo How does this help me please? I'm aware of the Usage notes, I used them to implement the module in the first place.

simonguo commented 2 years ago

hi @simplyfacadesAC You don't import a style file, and of course the component's styles won't be rendered. rsuite provides css and less files, you need to understand how remix imports styles.

https://remix.run/docs/en/v1/guides/styling#styling Remix explains in the documentation how to import styles

export function links() {
  return [
    {
      rel: "stylesheet",
      href: "https://unpkg.com/rsuite-table@5.6.0/dist/css/rsuite-table.css",
    },
  ];
}

or

import styles from "rsuite-table/dist/css/rsuite-table.css";

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}
sarab5000 commented 2 years ago

@simonguo I am struggling with the basic "Usage" example and not familiar with this "remix" stuff. Can you please provide more instructions? where should I add this "export function links() {..." ?