Courier in app toast theme

Using React CSS properties to customize the toast component

Rodrigo Rojas avatar
Written by Rodrigo Rojas
Updated over a week ago

Theme

The style configuration objects should be defined with Style Objects. Style Objects can accept CSS Pseudo selectors for more advanced styling. See here for more info or check below for advanced usage examples.

Note: Styles will be merged with defaults so if you do not explicitly override a style it will not be changed.

interface ITheme {
  body?: React.CSSProperties;
  root?: React.CSSProperties;
  toast?: React.CSSProperties;
  dismiss?: React.CSSProperties;
  message?: {
    actionBlock?: React.CSSProperties;
    textBlock?: React.CSSProperties;
    body?: React.CSSProperties;
    contents?: React.CSSProperties;
    icon?: React.CSSProperties;
    title?: React.CSSProperties;
  };
  progressBar?: React.CSSProperties;
};

Example

const theme = {
  "toast": {
    "backgroundColor": "black",
    "borderRadius": 5,
    "boxShadow": "0px 5px 20px 2px rgba(0,0,0,0.60)"
  },
  "dismiss": {
    "background": "orange"
  },
  "message": {
    "title": {
      "color": "white"
    },
    "textBlock": {
      "color": "white"
    },
    "actionBlock": {
      "backgroundColor": "white",
      "color": "red",
      "&:hover": {
        "backgroundColor": "red"
      }
    }
  }
}

Did this answer your question?