MeoNode UI - Frequently Asked Questions

Question 1

How does styling work in MeoNode UI?

Accepted Answer

Styling is done through props using a CSS-in-JS approach:

• Raw numbers are interpreted as pixels (20 becomes 20px)
• CSS properties are passed directly as props
• Theme tokens like 'theme.primary' resolve via the active ThemeProvider
• Type safety — autocomplete and error checking on every prop

``javascript
Button('Submit', {
  padding: '10px 20px',
  backgroundColor: 'var(--meonode-theme-primary)',
  color: 'var(--meonode-theme-primary-content)',
  borderRadius: 5,
})
`

For dynamic styles, use the css prop with a theme function:

`javascript
Div({
  css: {
    color: theme => theme.system.primary.content,
    '&:hover': { backgroundColor: 'var(--meonode-theme-primary)' },
  },
})
`

To render a styled node as a different HTML tag (e.g. a styled Div as <a>), use the as` prop — see the [Styling guide](/docs/getting-started/styling#element-polymorphism-as).

Question 2

How do I render a styled node as a different HTML tag?

Accepted Answer

Use the as prop on any styled node factory to render a different intrinsic HTML tag while keeping the same styles and Emotion class:

``typescript
import { Div } from '@meonode/ui'

Div({
  as: 'a',
  href: '/home',
  backgroundColor: 'var(--meonode-theme-primary)',
  padding: '12px 24px',
  children: 'Go home',
})
`

Works on Node(), createNode(), and createChildrenFirstNode(). TypeScript narrows DOM props and event handlers to the resolved tag (href on as: 'a', etc.).

Limitations:

• Custom React components cannot be used as as targets — wrap with Node(MyComponent, …) instead.
• No-style tags (e.g. Script) do not support as.
• as is stripped at render time and never leaks to the DOM.

Full guide: [Styling → Element Polymorphism (as`)](/docs/getting-started/styling#element-polymorphism-as)

Question 3

How do I pass props like height to custom components?

Accepted Answer

How do I pass props like height to custom components?

When creating custom components in MeoNode UI, you need to understand how props are processed:

The Rule

• CSS-like prop names (height, width, padding, margin, etc.) used for non-styling purposes → must go in the
  props object
• Non-CSS prop names (data, title, onClick, etc.) → can be passed at root level

Why?

MeoNode UI processes CSS-like prop names as styles. If you have a custom component that needs height for logic (not
styling), passing it directly will be intercepted by the style processor.

Example

``typescript
import type { CSSProperties } from 'react'
import { Component, Div, Node } from '@meonode/ui'

type ChartProps = {
  height: number // For chart logic, not styling
  data: number[] // Not a CSS prop
  style?: CSSProperties // Opts the component into top-level CSS props
}

const Chart = Component<ChartProps>(function Chart({ height, data }) {
  return Div({
    children: Chart with ${data.length} points at ${height}px height,
  })
})

// Usage with Node
Node(Chart, {
  backgroundColor: 'white', // Styling prop
  padding: '20px', // Styling prop
  data: [1, 2, 3, 4], // Root level • not CSS-like
  props: {
    // CSS-like custom props here
    height: 500, // Goes to component logic, not styling
  },
})
`

When to use props

Only use the props` object when your custom component prop has the same name as a CSS property but serves a different
purpose. Otherwise, pass props directly at root level.

Question 4

How does the theming system work?

Accepted Answer

MeoNode UI integrates a robust theming system directly into styling:

• Define design tokens once and use them across components
• Theme-aware properties like theme.colors.primary, theme.spacing.md
• Global style changes through centralized theme configuration
• Consistent visual language across your entire application

Augment the MeoTheme interface to get autocomplete on every 'theme.<path>' string, and a typed theme wherever you receive one:

``typescript
declare module '@meonode/ui' {
  interface MeoTheme {
    mode: 'light' | 'dark'
    system: {
      colors: { primary: string; bg: string }
      spacing: { sm: string; md: string }
    }
  }
}
``

See the [Theming guide](/docs/getting-started/theming) for the full setup.

The node	`flex-shrink`
not a flex container	`0`
`display: flex`, no `overflow` and no wrapping	`0`
`display: flex` with `overflow` handled	not set
`display: flex` with `flexWrap`	not set
any node setting `flexShrink` itself	yours, untouched
any node setting `flex`	your shorthand's shrink factor — `flex: '1 1 auto'` and `flex: 0` shrink, `flex: 'none'` does not; not set if the value cannot be read, such as `var(--flex)`

Approach	Use when
`Div({ as: 'a', … })`	You already have styled defaults on a factory and only need a different tag occasionally
`createNode('a', { … })`	Links (or other tags) are a first-class reusable component in your design system

Styling Guide — MeoNode UI

Fundamentals

Three declarations you did not write

Pseudo-Classes & Pseudo-Elements

Media Queries

Keyframe Animations

Nested & Attribute Selectors

CSS Variables

Reusable Styled Components

Element Polymorphism (`as`)

When to use `as` vs a dedicated factory

What `as` will and will not do

How does styling work in MeoNode UI?

How do I pass props like height to custom components?

How does the theming system work?

How do I render a styled node as a different HTML tag?

Next Steps