External Classes

Question

External Classes

Closed this issue 8 years ago · 4 comments

Hello,

I'm currently close to the end of writing a component library and it uses Aphrodite underneath for the styles. Thanks for the this amazing library! However I ran into a bit of an issue. One of the primary goals is to make all the components really customizable with the least amount of effort. So we're using aphrodite/no-important I want the styles that I placed on the components with aphrodite to be overridable by simply passing in a class to the component. I assumed that by using
aphrodite/no-important that this was possible but aphrodite still overrides the class that is passed in. I also noted that adding a <style data-aphrodite/> will cause aphrodite to stop overriding the class passed in. However, this something we want to avoid users from doing otherwise we could have just forced the user to import a css file for the library but wanted to avoid that because the goal is import the component and everything just works. Is there any other work around to getting aphrodite to not override styles passed in?

An example of what I'm doing is this:

<div className={(props.className) ? `${css(styles.Card)} ${props.className}` : css(styles.Card)}>
    ...
</div>

I hope I was able to convey what I mean so that it is understandable, if there is any misunderstanding let me know so I can clarify 😄 .

Answer 1 · 2016-10-25T01:15:51.000Z

This doesn't really sound like a problem with Aphrodite, more like a problem with CSS in general. If the styles that you are adding have a single classname selector (i.e. .blah { /* styles here */ }) then you're going to run into specificity issues where the class name which appears later in the style sheets will override ones that appear earlier.

A solution to your problem is to give your styles more specificity by making the selectors more specific.

I guess we could put the style tag that Aphrodite generates at the top of the <head> element, because in the !important case it doesn't matter where we put things (maybe?) and in the non-!important case people might want their styles to override Aphrodite? Maybe that's not the case though. I think we lose no matter how we do it.

Answer 2 · 2016-10-25T01:31:23.000Z

@xymostech yea, I totally get what you mean. I really love aphrodite and it is great for writing libraries with because you get a lot of things for free. Is there anyway I can make a PR to get this working to move the style that aphrodite generates to the top of the head? It would make writing libraries so much easier with aphrodite, this is the second one I write with aphrodite. I guess inverting the defaults so that instead of opting into style at the top you can opt out? I hope this isn't too much trouble.

Answer 3 · 2016-10-25T01:41:48.000Z

@xymostech optionally (doubt this will work) can we pass a class name into css()? to make it follow the order precedence like with `StyleSheet?

Answer 4 · 2016-10-25T19:08:54.000Z

@kennetpostigo You can absolutely submit the pull request, but I'm not sure which behaviour we actually want. Like if you have a CSS reset, you probably want Aphrodite to override stuff in there, so we would want Aphrodite to go after? Not sure. But feel free to send in a PR and we can discuss there.

can we pass a class name into css()?

Since we don't control the styles that are referenced by external class names, we couldn't make this work. Sorry. :(