Back to all questions

Can I use PostCSS function in inline styles?

Last updated

What are PostCSS functions?

postcss-preset-mantine provides functions, mixins and other helpers to simplify working with Mantine styles. Example of using light-dark function in styles:

// What you write
.demo {
  background: light-dark(white, black);
}

// What you get after PostCSS processing
[data-mantine-color-scheme='light'] .demo {
  background: black;
}

[data-mantine-color-scheme='dark'] .demo {
  background: black;
}

Can I use PostCSS functions in inline styles?

No, PostCSS functions are not supported in inline styles. You can use PostCSS functions only in .css files. The following example will not work:

import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button
      style={{
        // ❌ This does not get processed by PostCSS
        backgroundColor: 'light-dark(white, black)',
      }}
    >
      Button
    </Button>
  );
}