CSS Stylesheets & Classes

[jeissler]

The docs say there is extra setup needed to continue using stylesheets and classes, but doesn't specify exactly what. And also under the usage section the css file link is broken; it seems like 3.0 component structure changed enough that I'm unable to use existing (old) stylesheets for rheostat.

I'm new to rheostat (thanks airbnb!) and am not using the CSS-in-JS on the project I'm working w/ but would still like to use this component. I've added import 'rheostat/initialize' and can get the component to work, but the base styles I generated from the other links just aren't complete. I've inspected the output and could write my own styles for it, but it seems best if I work from the intended base css if at all possible.

Thanks for any other info or doc updates you can provide.

[majapw]

Hi @jeissler, can you clarify what you mean by

the base styles I generated from the other links just aren't complete.

I'm not entirely sure I understand.

[jeissler]

Thanks for your attention on this @majapw! To clarify, I tried using the link under the theming section to pull the default theme styles from the codebase. This worked somewhat after inspecting and renaming some of my classes, but I couldn't get a complete base stylesheet out of it.

[tbassetto]

I think I am in a situation more or less similar to @jeissler. I am currently using Rheostat 2, I just took the previous css file that you provided and modified it to match the design I needed.

I am now trying to upgrade to Rheostat 3 but it's a bit painful:

• You mention className as a valid prop but it throws an error if this prop is used.
• In the "Usage" section there is a link to a css file that we are supposed to "Make sure to include" but it's leads to a 404.

It would be great if you could provided an example on how to style the component using CSS only 😅. The only example so far is using aphrodite.

[andreiho]

@tbassetto I chose to ignore the theming instructions in the documentation and simply use rheostat's classes to globally apply styles for all sliders. I had to upgrade because of a performance issue, and didn't want to bother with theming. Here's a simplified example:

:global {
  .DefaultBackground {
    background-color: #f0f0f0;
  }

  .DefaultProgressBar_progressBar {
    background-color: #000000;
  }
}

You can find all default styles and classes you can overwrite in node_modules/rheostat/css/rheostat.css.

[kylebebak]

Jesus... The docs are truly awful. They point to a stylesheet that you need to "make sure to include" and it's a dead link.

You can import 'rheostat/css/rheostat.css', but this doesn't help much. I imported this style sheet, then I copied this verbatim from the docs...

<Rheostat
  min={1}
  max={100}
  values={[1, 100]}
/>

And this is what was rendered...

See that slider up in the top-right corner? It's 20 pixels wide! Neither the className prop nor style prop does anything.

Beautiful, right?

[majapw]

Is this the point where I sassily say "PRs are welcome"? 😬Seriously though, I think there are a lot of improvements that could be made to the docs. I think they don't quite reflect the changes in v3.

I think the CSS file it's meant to link to is https://unpkg.com/rheostat@3.0.1/css/rheostat.css, but that particular link hasn't been updated.

I think the best place to look for examples of slider code (and we'd def accept something to update the README to better reflect that) is https://github.com/airbnb/rheostat/blob/master/stories/ExampleSlider.jsx. That's the source for the live playground and provides a variety of examples.

[juank11memphis]

Is someone maintaining this project? How come className does not works! :(

[ljharb]

@juank11memphis yes, and it doesn't work because it shouldn't work. See https://brigade.engineering/don-t-pass-css-classes-between-components-e9f7ab192785.

[juank11memphis]

@ljharb I can understand that article for your application but not for a library that was created for the use of the community. Customization should be easy in my opinion

[ljharb]

The library is fully customizable via react-with-styles, and since CSS cascades, you can easily wrap anything in a styled div, for example.

[juank11memphis]

I ended using pure css to style this as I didn't want to introduce react-with-styles as a direct dependency on my project.

[designbyadrian]

@ljharb If it shouldn't work, why is it mentioned in the docs? https://github.com/airbnb/rheostat#props

[ljharb]

@designbyadrian fair enough; it seems we made a mistake - that shouldn't be available.

Please feel free to file a separate issue with repro steps if something in the docs doesn't work.

I'm going to close this since it doesn't seem particularly actionable.