CSS in JS

Feedback

One of the goals of Amplify is to be a good citizen of the environment it exists in. As such Amplify works hard to not interfere with other tools that are being used.

There are many CSS In JS libraries out there that give a number of benefits. Amplify does not use a CSS In JS library to implement its theming system but operates well with the major CSS In JS libraries out there. Below are a few of the libraries with descriptions of how they work with Amplify's theming system.

If your CSS library depends on injecting style tags into the DOM, make sure they are being injected after Amplify UI's style tag. In other words, ensure the style tag for Amplify UI is listed above your custom styles in the <head> tag. If Amplify UI's styles are injected after custom styles, then your custom styles may be unset.

Styled Components allows you to create visual primitives with actual CSS code directly tied to components.

Usage

import * as React from 'react';
import styled from 'styled-components';
import { View } from '@aws-amplify/ui-react';

const StyledView = styled(View)`
  background-color: black;
  font-size: 32px;
`;

//use it like any other amplify-ui component
<StyledView color="red" className="my-styled-view">
  This is my Styled View
</StyledView>;

Interactions

There are various ways to customize an Amplify component and Styled Components will interact with these customizations in the following ways:

Amplify Styling Props

These are styling props that can be used directly on an Amplify component which will affect a single style property. Examples of styling props are color or fontWeight. These Amplify styling props will take precedence over Styled Component styling.

import * as React from 'react';
import styled from 'styled-components';
import { View } from '@aws-amplify/ui-react';

const StyledView = styled(View)`
  color: blue;
`;

<StyledView color="red">Using Styling props</StyledView>;

In the example above, the color of the view will be set to red because of the Amplify styling prop.

Amplify variation props

These props change the look and/or behavior of certain Amplify components. Examples include size and variation.

import * as React from 'react';
import styled from "styled-components";
import { Button } from '@aws-amplify/ui-react';

const StyledButton = styled(Button)`
  color: blue
`;

<StyledButton variation="primary">Primary Button</StyledButton>

In the example above, the color of the button will be set to blue. Although the primary variation has a color value of white the Styled Components color value of blue will take precedence over the amplify-ui variation styling.

Amplify Custom ClassNames

These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component.

import * as React from 'react';
import styled from 'styled-components';
import { View } from '@aws-amplify/ui-react';

const styledView = styled(View)`
  color: blue;
`;

<styledView className="my-styled-view">My Styled View</styledView>;

/* External Style Sheet */
.my-styled-view {
  color: red;
}

In the example above, the color of the view will be blue because the styled component will take precedence over the classname CSS.

CSS Root Variable Overrides

Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used with the :root CSS psuedo-class to override all instances of component styling.

import * as React from 'react';
import styled from 'styled-components';
import { Button } from '@aws-amplify/ui-react';

const StyledButton = styled(Button)`
  color: blue;
`;

<StyledButton>Button</StyledButton>;

/* External Style Sheet */
:root {
  --amplify-components-button-color: red;
}

In the example above, the button color will be set to blue because the Styled Component will take precedence over the Amplify CSS variable.

JSS is a library for generating Style Sheets with Javascript.

Usage

import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { View } from '@aws-amplify/ui-react';

const useStyles = createUseStyles({
  styledText: {
    color: 'blue',
  },
});

const classes = useStyles();

//use the JSS create classes in the Amplify ui className
<Text className={classes.styledText}>This is my JSS Text </Text>;

Interactions

There are various ways to customize an Amplify component and JSS will interact with these customizations in the following ways:

Amplify Styling Props

import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { View } from '@aws-amplify/ui-react';

const useStyles = createUseStyles({
  styledText: {
    color: 'blue',
  },
});

const classes = useStyles();

<Text className={classes.styledText} color="red">
  This is my JSS Text
</Text>;

In the example above, the color of the view will be set to red because of the Amplify styling prop.

Amplify variation props

These props change the look and/or behavior of certain Amplify components. Examples include size and variation.

import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { Button } from '@aws-amplify/ui-react';

const useStyles = createUseStyles({
  styledButton: {
    color: 'blue',
  },
});

const classes = useStyles();

<Button className={classes.styledButton} variation="primary">
  Primary Button
</Button>;

In the example above, the color of the button will be set to blue. Although the primary variation has a color value of white the JSS color value of blue will take precedence over the amplify-ui variation styling.

Amplify Custom ClassNames

These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component.

import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { View } from '@aws-amplify/ui-react';

const useStyles = createUseStyles({
  styledText: {
    color: 'blue',
  },
});

const classes = useStyles();
const classNames = `${classes.styledText} my-styled-text`;

<Text className={classNames}>This is my JSS Text </Text>;

/* External Style Sheet */
.my-styled-text {
  color: red;
}

In the example above, the color of the text will be blue because the JSS styling will take precedence over the classname CSS.

CSS Root Variable Overrides

Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used at a root level to override all instances of component styling.

import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { Button } from '@aws-amplify/ui-react';

const useStyles = createUseStyles({
  styledButton: {
    color: 'blue',
  },
});

const classes = useStyles();

<Button className={classes.styledButton}>Button</Button>;

/* External Style Sheet */
:root {
  --amplify-components-button-color: red;
}

In the example above, the button color will be set to blue because the JSS styling will take precedence over the Amplify CSS variable.

Emotion is a library designed for writing css styles with JavaScript.

Usage

/** @jsxImportSource @emotion/react */
import { jsx, css } from '@emotion/react';
import { Text } from '@aws-amplify/ui-react';

const styles = {
  color: 'blue',
};

//use the Emotion css function and css prop
<Text css={css(styles)}>This is my Emotion Text </Text>;

Interactions

There are various ways to customize an Amplify component and Emotion will interact with these customizations in the following ways:

Amplify Styling Props

/** @jsxImportSource @emotion/react */
import { jsx, css } from '@emotion/react';
import { Text } from '@aws-amplify/ui-react';

const styles = {
  color: 'blue',
};

<Text css={css(styles)} color="red">
  This is my Emotion Text
</Text>;

In the example above, the color of the view will be set to red because of the Amplify styling prop.

Amplify variation props

These props change the look and/or behavior of certain Amplify components. Examples include size and variation.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { Button } from '@aws-amplify/ui-react';

const styles = {
  color: 'blue',
};

<Button css={css(styles)} variation="primary">
  Primary Button
</Button>;

In the example above, the color of the button will be set to blue. Although the primary variation has a color value of white the Emotion color value of blue will take precedence over the amplify-ui variation styling.

Amplify Custom ClassNames

These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { Text } from '@aws-amplify/ui-react';

const styles = {
  color: 'blue',
};

<Text css={css(styles)} className="my-styled-text">
  This is my Emotion Text
</Text>;

/* External Style Sheet */
.my-styled-text {
  color: red;
}

In the example above, the color of the text will be blue because the Emotion styling will take precedence over the classname CSS.

CSS Root Variable Overrides

Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used at a root level to override all instances of component styling.

/** @jsxImportSource @emotion/react */
import { jsx, css } from '@emotion/react';
import { Button } from '@aws-amplify/ui-react';

const styles = {
  color: 'blue',
};

<Button css={css(styles)}>Button</Button>;

/* External Style Sheet */
:root {
  --amplify-components-button-color: red;
}

In the example above, the button color will be set to blue because the Emotion styling will take precedence over the Amplify CSS variable.

Aphrodite is a Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation.

Usage

import { StyleSheet, css } from 'aphrodite';
import { Text } from '@aws-amplify/ui-react';

const styles = StyleSheet.create({
  blue: {
    color: 'blue',
  },
});

//use the Aphrodite css function and the className prop
<Text className={css(styles.blue)}>This is an aphrodite Text component</Text>;

Interactions

There are various ways to customize an Amplify component and Aphrodite will interact with these customizations in the following ways:

Amplify Styling Props

These are styling props that can be used directly on an Amplify component which will affect a single style property. Examples of styling props are color or fontWeight. Aphrodite will take precedence over these Amplify styling props.

import { StyleSheet, css } from 'aphrodite';
import { Text } from '@aws-amplify/ui-react';

const styles = StyleSheet.create({
  blue: {
    color: 'blue',
  },
});

<Text className={css(styles.blue)} color="red">
  This is an aphrodite Text component
</Text>;

In the example above, the color of the view will be set to blue because of the Aphrodite styling will take precedence.

Amplify variation props

These props change the look and/or behavior of certain Amplify components. Examples include size and variation.

import { StyleSheet, css } from 'aphrodite';
import { Button } from '@aws-amplify/ui-react';

const styles = StyleSheet.create({
  blue: {
    color: 'blue',
  },
});

<Button className={css(styles.blue)} variation="primary">
  Primary Button
</Button>;

In the example above, the color of the button will be set to blue, because the Aphrodite styling will take precedence over the Amplify variation styling.

Amplify Custom ClassNames

These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component.

import { StyleSheet, css } from 'aphrodite';
import { Text } from '@aws-amplify/ui-react';

const styles = StyleSheet.create({
  blue: {
    color: 'blue',
  },
});

const classNames = `${css(styles.blue)} my-styled-text`;

<Text className={classNaes}>This is an aphrodite Text component</Text>;

/* External Style Sheet */
.my-styled-text {
  color: red;
}

In the example above, the color of the text will be blue because the Aphrodite styling will take precedence over the classname CSS.

CSS Root Variable Overrides

Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used at a root level to override all instances of component styling.

/** @jsxImportSource @emotion/react */
import { StyleSheet, css } from 'aphrodite';
import { Button } from '@aws-amplify/ui-react';

const styles = StyleSheet.create({
  blue: {
    color: 'blue',
  },
});

<Button className={css(styles.blue)}>Button</Button>;

/* External Style Sheet */
:root {
  --amplify-components-button-color: red;
}

In the example above, the button color will be set to blue because the Aphrodite styling will take precedence over the Amplify CSS variable.