How to set global styles?

[droganov]

Is it possible to have something similar to aphrodite global extention:
https://github.com/Khan/aphrodite#creating-extensions

[Jordan Harband]

I'm not sure what you're asking - the intention is to have no global styles.

[droganov]

@ljharb OK, if you want to have body (font, bg) linked to the theme, how do you do that if body is outside your react app?

[Jordan Harband]

You supply the theme from the same data source that you use to set body attributes, I suppose.

[droganov]

what if you want to switch themes on the go? then you need to have at least 2 solutions to solve 1 problem

[Jordan Harband]

Is your entire app not in react, such that the body needs any styling?

If so, then you may indeed need to write a lot of code to mesh together two very different rendering patterns.

[droganov]

my, app is in react, but it is isomorphic and I'd love to set some body defaults.

This library is in fact the most close to what I need, but it would be nice to have globals just like they do in Aphrodite:

const styles2 = StyleSheet.create({
    globals: {
        '*div': {
            color: 'blue',
        },
    },
});

I will probably use this approach, but I'm curious if it can be done naturally without hacking

[Joe Lencioni]

I think this would be up to the specifics of the underlying interface you are using. If you are using the aphrodite interface, this might just work for you out of the box.

However, I'd suggest trying to avoid relying on interface-specific behavior, because it will make it more difficult to switch between interfaces if you want to later. Instead I wonder if it would work for you to create a component that does what you want, that you would render at the top level of your app. Something like <BodyAttributes {...css(styles.body)} />.

[droganov]

@lencioni
Yes, I clearly understand it is connected to the interface.

In Aphrodite they extend stylesheet

const myExtension = {selectorHandler: mySelectorHandler};
const { StyleSheet: newStyleSheet, css: newCss } = StyleSheet.extend([myExtension]);

But can I do same to ThemedStyleSheet?

[Vladislav Kosovskikh]

Hi. How I can declare reusable styles, for example, "clearfix" and use it in many components?

[droganov]

Hi. Dependency injection (import, require).

…

On Mon, 28 Aug 2017 at 15:30, Vladislav Kosovskikh ***@***.***> wrote: Hi. How I can declare reusable styles, for example, "clearfix" and use it in many components?

[Merlin (they/them)]

I have found a way to add extensions to aphrodite. You first need to extend the StyleSheet from aphrodite itself. This will give you a new StyleSheet and new css functions that have the extended selector. You then pass this to the interface factory to create a new aphroditeInterface. Once that is created, register the interface with the theme. Finally, you have to export ThemedStyleSheet.resolve as css.

import {withStyles, ThemeProvider} from 'react-with-styles';
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterfaceFactory from 'react-with-styles-interface-aphrodite/lib/aphroditeInterfaceFactory';
import {StyleSheet as oldStyleSheet, flushToStyleTag} from 'aphrodite/no-important';

import theme from './theme';

const descendantExtension = {
  selectorHandler(selector, baseSelector, generateSubtreeStyles) {
    /* selectorHandlerBody */
  },
};

const {StyleSheet, css: newCss} = oldStyleSheet.extend([descendantExtension]);
const aphroditeInterface = aphroditeInterfaceFactory({StyleSheet, css: newCss, flushToStyleTag});

ThemedStyleSheet.registerDefaultTheme(theme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

const css = ThemedStyleSheet.resolve;

export {
  css,
  withStyles,
  ThemeProvider,
  ThemedStyleSheet,
};