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. Useful to attach to a React's 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 concat 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.