API ReferenceclassName (%cx)

className: cx extension

Aside from the styled extension, styled-ppx provides the %cx [%cx] extension.

%cx [%cx] generates a className given one or more CSS declarations. This is useful to attach to a React component via the className prop. Sometimes is hard to give the right name for a styled component or maybe those styles are only used once, that’s why %cx [%cx] exists.

Examples

<span className=%cx("font-size: 32px")> {React.string("Hello!")} </span>
<span className=[%cx "font-size: 32px"]>
  {React.string("Hello!")}
</span>;
let fullWidth: string = %cx(`
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
`)
 
<div className=fullWidth> {React.string("Hello!")} </div>
let fullWidth: string = [%cx {|
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
|}];
 
<div className=fullWidth> {React.string("Hello!")} </div>;

The value fullWidth is a string that contains a hash pointing to a style HTML tag in the <head>. If you want to concatenate it with other styles, you can use the string concatenation operator (++):

<div className=fullWidth ++ " " ++ "extra-classname"> {React.string("Hello!")} </div>
<div className=fullWidth ++ " " ++ "extra-classname"> {React.string("Hello!")} </div>

Features

  • Selectors, media queries and other nesting is supported in CSS declarations.
  • Interpolation is allowed. %cx("color: $(Theme.colors.primary)") [%cx "color: $(Theme.colors.primary)"].
  • Curly braces aren’t allowed. %cx("{ display: block; }") [%cx "{ display: block; }"] will break.
Dynamic componentsRule (%css)