useStyles

sunpeak API

Overview

The useStyles hook returns the host’s style configuration. It is a convenience wrapper around useHostContext.

Wraps onhostcontextchanged

MCP Apps SDK reference

For most use cases, prefer the SDK’s useHostStyleVariables or useHostFonts hooks which automatically apply styles to the document. Use useStyles when you need raw access to the style data.

Import

import { useStyles } from 'sunpeak';

Signature

function useStyles(): McpUiHostStyles | undefined

Returns

McpUiHostStyles | undefined

The host’s style configuration including CSS variables and font settings, or undefined if the host does not provide styles.

Usage

import { useStyles } from 'sunpeak';

function MyResource() {
  const styles = useStyles();

  return (
    <div>
      {styles?.variables?.['--color-text-primary'] && (
        <p>Primary text color: {styles.variables['--color-text-primary']}</p>
      )}
    </div>
  );
}

Getting Started

CLI

Components

Functions

Hooks

Resources

Tools

Guides

Overview

Wraps onhostcontextchanged

Import

Signature

Returns

Usage

​Overview

Wraps onhostcontextchanged

​Import

​Signature

​Returns

​Usage

Overview

Import

Signature

Returns

Usage