[Request] Provide access to generated styles (provide access to styles[]._definition)

[Alejandro Cotroneo]

Hi! Any chance you can cover this use case (or may be you already do, and I overlooked it):

Suppose I have this styles

({ colors }) => {
        snackBar_error: {
            backgroundColor: colors.error,
            fontWeight: 'bold'
        },

In certain situations, I'd like to just have direct access to that generated style instead of consuming it through css(). This is useful to me in 2 situations:

• When using external libraries that require styles (this example is an actual snackbar from material-ui)
• In some cases I find it better to only decorate the top level containers/components and pass a few props (like colors) to children and have them decoupled from any other dependencies.

I know I can use this.props.styles.snackBar_error._definition on my component but that seems very prone to change. Do you think that exposing that in a tidy way may cause any problems, or that will go against maintainability/encapsulation? Or how do you recommend to handle this cases?

Thank you very much!! I really like this library!

[Joe Lencioni]

Hi @aacotroneo! Thanks for the question. 😀

When using external libraries that require styles (this example is an actual snackbar from material-ui)

Although I don't have any experience with material-ui, I'm not sure it makes sense to run these styles through withStyles in this case. Depending on the interface you are using, it may generate inline styles or CSS classNames (while injecting styles onto the page for those classNames). Instead, it seems like you could just pass the styles directly to your material-ui snackbar. What do you hope to get by passing these styles through withStyles?

In some cases I find it better to only decorate the top level containers/components and pass a few props (like colors) to children and have them decoupled from any other dependencies.

Here again, I don't think I really understand what you are trying to accomplish. How does running these styles through withStyles limit what props you can pass to children?

Do you think that exposing that in a tidy way may cause any problems, or that will go against maintainability/encapsulation?

The idea behind react-with-styles is to provide an abstraction layer so you don't have to think as much about how your styles are being handled. The interface determines whether you are using inline styles, CSS classNames, or a mixture of both. I think that exposing direct access to the styles will likely not be a great idea because of the added complexity to the library and the types of patterns that it would enable would likely hurt the maintainability of your app code.

But, it is quite possible that I don't actually understand your use-case. It would be much easier to discuss this concretely if you could provide some code examples of what you are hoping to do.

[Alejandro Cotroneo]

Thanks for answering :)

I've been playing a little more and have a different perspective. May be what I'd want is to have access to the raw theme components through this library, so I can take advantage of all the theme management and to keep all that at one place.

Whenever I decorate my component with the withStyles, the theme structure and location is nicely hidden from it, as it's just injected.

But whenever I need to access (say a color from) the theme I end up requiring the theme files directly which spoils some of the magic.

import { withStyles, css } from './styles/with-styles'; // this is the main app theme
import {colors} from './styles/theme/colors'; // this is breaking encapsulation a bit

@withStyles(styles)
default class Component extends Component {

  // I need colors.blue here from my theme to style a 3rd party component.
  // I can't use withStyles because my component requires specific formats 
  // for its style related props (like color={xxx})

So, the specific usecase here would be - how'd you recommend to get such a reference to the current theme's blue color? (so I can pass it to a 3rd party component that requires a color prop). Shouldn't this library be responsible for locating that color somehow as well?

Thanks!

PS: I understand this would break some opaqueness on the other hand.. so I don't know how the API should be changed to allow something like this.

[Jordan Harband]

You can still use withStyles only for the theme, no?

[Alejandro Cotroneo]

yep! when I import my colors for direct use I need to look for the current theme as well, but nothing more serious than that.. (ie. a few lines) so no need to change anything in the library. thanks!