如何在Sanity Studio V3中导入自定义CSS？旧方法已失效

方法1：直接在配置中写入内联CSS #

适合极少量样式调整，直接在sanity.config.ts（或.js）的配置对象里添加css字段，用模板字符串编写样式：

import {defineConfig} from 'sanity'
import {deskTool} from 'sanity/desk'

export default defineConfig({
  name: 'default',
  title: 'My Studio',
  projectId: 'your-project-id',
  dataset: 'production',
  plugins: [deskTool()],
  css: /* css */ `
    /* 修改全局根变量 */
    :root {
      --color-primary: #2563eb;
      --font-family-sans: 'Segoe UI', sans-serif;
    }
    /* 调整侧边栏背景 */
    [data-ui="Pane"] {
      background-color: #f1f5f9;
    }
  `,
})

方法2：导入外部CSS文件 #

如果样式稍多，可单独创建CSS文件后导入到配置中：

1. 在项目中创建src/studio.css文件：

/* 修改编辑器输入框样式 */
[data-ui="TextInput"] input {
  border-radius: 6px;
  border-color: #e2e8f0;
  padding: 0.5rem 0.75rem;
}
/* 隐藏顶部不必要的元素 */
.sanity-studio-topbar__action--help {
  display: none;
}

2. 在sanity.config.ts中导入并传入css字段（注意添加?raw后缀，让Vite将文件作为纯文本导入）：

import {defineConfig} from 'sanity'
import {deskTool} from 'sanity/desk'
import studioCss from './studio.css?raw'

export default defineConfig({
  // 其他配置项...
  css: studioCss,
})

方法3：针对单个组件覆盖样式 #

如果只需修改特定组件的样式，可使用Sanity内置的styled工具（基于styled-components）包装目标组件：

import {defineConfig} from 'sanity'
import {deskTool} from 'sanity/desk'
import {styled} from 'sanity'
import {Button} from '@sanity/ui'

// 自定义按钮组件
const CustomButton = styled(Button)`
  background-color: #10b981;
  &:hover {
    background-color: #059669;
  }
`

export default defineConfig({
  // 其他配置...
  form: {
    components: {
      button: CustomButton, // 替换全局按钮组件
    },
  },
})

内容的提问来源于stack exchange，提问作者Jeremy