Private Css Variables

import { Text } from '@mantine/core'; import { Layout } from '@/layout';

export const meta = { title: 'Can I use private CSS variables to style components?', description: 'No, it is not safe and will not work with future versions of Mantine.', slug: 'private-css-variables', category: 'styles', tags: ['styles', 'variables', 'css-variables'], created_at: 'December 28, 2023', last_updated_at: 'December 28, 2023', };

export default Layout(meta);

What are private CSS variables?

Private CSS variables start with --_, for example --_input-bd-focus. These variables are a part of internal Mantine API and are not intended to be used by end users. In most cases private CSS variables are used to reduce specificity of styles and make them easier to override.

Should I use private CSS variables to apply styles?

Absolutely not. Private CSS variables can be changed or removed in minor and patch releases without any notice. In this case, if you use private variables to style components, styles of your application will silently (no errors will be reported by any tools) break after update. Private CSS variables were implemented to reduce specificity of styles when :where selector was not widely available. Now when :where is supported by all major browsers private CSS variables will be removed over time in most components.

But what should I do instead?

Use regular styles instead. For example, to change input border color on focus:

.input {
  // ❌ do not use private CSS variables
  --_input-bd-focus: red;
  --_input-placeholder-color: red;
}

.input {
  // ✅ use regular styles
  &:focus,
  &:focus-within {
    border-color: red;
  }

  &::placeholder {
    color: red;
  }
}