reactjs - 在 TSX 組件的 Style 標籤中對 CSS 進行語法高亮

在我的 React 應用程式中，我喜歡在特定 TSX 元件的 style 標籤內撰寫 CSS 樣式。有沒有辦法在這種情境下讓 VS Code 支援 CSS 語法高亮顯示？

目前，整個檔案都顯示 TSX 語法高亮，這意味著 CSS 字串片段都是單一顏色。

我沒有使用 styled-components。

以下是我想在 style 標籤內容中突顯的文字範例：

export default function HomeStyle() {
  return (
    <style>{`
    .container {
      min-height: 100vh;
      padding: 0 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .main {
      padding: 5rem 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .footer {
      width: 100%;
      height: 100px;
      border-top: 1px solid #eaeaea;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    `}</style>
  );
}

答案＃1

如果你使用名為 css 的標籤模板字面量，你應該能獲得 CSS 智慧提示和語法高亮。例如：

const css = String.raw;
 
export default function HomeStyle() {
  return (
    <style>{css`
    .container {
      min-height: 100vh;
      padding: 0 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .main {
      padding: 5rem 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .footer {
      width: 100%;
      height: 100px;
      border-top: 1px solid #eaeaea;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    `}</style>
  );
}

如果你使用名為 html 的標籤模板字面量，你應該會獲得 HTML 智能提示和語法高亮。例如：

const html = String.raw

const template = html`
  <div class="container"></div>
`

在這些例子中，我使用 String.raw 作為通道。框架可能提供自己的 html 和 css 函數用於此目的，並添加框架特定的功能。