react-with-styles-interface-amp-aphrodite
Interface to use react-with-styles with Aphrodite and Amp.
Import
;
or when you need to disable !important
:
;
Amp Support
If your app is being rendered with Amp, react-with-styles-interface-amp-aphrodite
expects you to set
process.env.AMP
to 'true'
at compile time. This can readily be accomplished by using the following
option in your webpack config:
{
name: 'amp',
plugins: [
new webpack.DefinePlugin({
'process.env.AMP': 'true',
}),
],
}
Built-in RTL support
react-with-styles-interface-amp-aphrodite
has built-in LTR/RTL context support. Specifically, it uses rtl-css-js to automatically flip styles (margin
, padding
, float
, textAlign
, etc.) that were written for an LTR page when your app is wrapped in react-with-direction's DirectionProvider
with direction set to DIRECTIONS.RTL
.
It accomplishes this by providing a directional create
and resolve
method. react-with-styles
automatically uses the correct create method based on the direction value set in context and then passes down the appropriate resolve
method as a prop named css
.
For instance, if you were to write your styles as follows:
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';import ampAphroditeInterface from 'react-with-styles-interface-amp-aphrodite';import withStyles css from 'react-with-styles'; ThemedStyleSheet;ThemedStyleSheet; ...mp-a { return <div >Hello World</div>;} container: background: '#fff' float: 'left' MyComponent;
The generated css for an app where you set <DirectionProvider direction={DIRECTIONS.LTR}>
at the top would look like:
whereas if you had set <DirectionProvider direction={DIRECTIONS.RTL}>
, the generated css would be:
If you used an inline style instead:
import css from 'react-with-styles'; { return <div >Hello World</div>;}
In the case where <DirectionProvider direction={DIRECTIONS.LTR}>
is wrapping your component, this would map to a style={{ background: '#fff', float: 'left' }}
on the div in question. If <DirectionProvider direction={DIRECTIONS.RTL}>
is present instead, this would simply apply style={{ background: '#fff', float: 'right' }}
to the div.