#Styling

Use className and style for outer layout, and theme for colors and typography within the content.

#Page layout

style accepts a Lynx style object:

import { Fluxdown } from '@fluxdown/react-lynx';

<Fluxdown
  className="conversation-message"
  style={{ padding: '16px', maxWidth: '720px' }}
  text={text}
/>;

#Light and dark

Choose a preset with theme="light" or theme="dark". Connect it to your app's theme state to follow the surrounding interface:

<Fluxdown theme={isDark ? 'dark' : 'light'} text={text} />

#Override a theme

Themes accept a preset name, partial overrides, or [preset, overrides]. Use strings with units for dimensions and fonts loaded by your host:

<Fluxdown
  theme={[
    'dark',
    {
      tokens: {
        colors: { accent: '#82d8cf' },
        typography: { fontSize: { md: '16px' } },
        paragraph: { marginBottom: '16px' },
      },
    },
  ]}
  text={text}
/>

Import Theme, ThemeTokens and PartialThemeConfig from @fluxdown/react-lynx-plugins/typings.

Every group accepts partial overrides; you do not need to copy a complete theme. Use slot plugins to replace navigation, code toolbars or image components.

#Native text styles

Text styles propagate explicitly to native text elements without CSS inheritance. Fonts and glyph metrics come from the host. inlineCode.whiteSpace supports normal and nowrap; other values use normal. The built-in native slots do not apply typography.fontSmoothing or colors.accentHover; custom host slots can use these tokens.