行内代码 · Code

行内代码用于内容展示场景。下面的官方示例展示原生用法与状态，属性名保持上游 API。

安装与前置条件

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。

示例与使用方式

行内代码 · 综合展示 1：首先体验这个示例，再查看代码理解组件的组合方式。
行内代码 · 尺寸变化 / 尺寸 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
行内代码 · 交互示例 3：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
行内代码 · 交互示例 4：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。

API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

Code

Code marks short inline references such as function names, variables, file paths, and command-line flags. Use CodeBlock for standalone or multi-line snippets.

属性	类型	默认值	说明
children *	ReactNode		The inline code content.
color	'primary' \| 'secondary' \| 'inherit'	'primary'	Text color. Use 'inherit' to take the surrounding text color.
size	'inherit'		Set to 'inherit' to take the surrounding font size and line height. Omit it to use the code type-scale size.
ref	React.Ref<HTMLElement>		Ref forwarded to the semantic code element.
xstyle	StyleXStyles		StyleX styles for layout customization. Must be a stylex.create() value, not an inline style object like style={{}}.
className	string		CSS class name for the root element. Prefer xstyle for styling.
style	CSSProperties		Inline styles for the root element. Prefer xstyle for StyleX-optimized styling.
data-testid	string		Test selector for automated testing frameworks.

使用建议

Use Code for short technical terms inside prose, such as a function name, prop, file path, or command-line flag.
Set size to 'inherit' when inline code should match the surrounding text size and line height.
避免：Use Code for multi-line or standalone snippets. Use CodeBlock instead so readers get appropriate block formatting and syntax support.
避免：Use Code as an interactive copy or navigation control. Pair it with the appropriate Button or Link when an action is required.

主题 API

{
  "targets": [
    {
      "className": "astryx-code",
      "visualProps": [
        "color"
      ]
    }
  ]
}

组件结构

Container: The semantic code element that contains the inline code content and paints the background, typography, padding, and radius.