Steps to reproduce

Link to live example: https://stackblitz.com/edit/github-xk9wmf?file=src%2FApp.tsx

import { FC } from 'react';
import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';

import './style.css';

export const App: FC<{ name: string }> = ({ name }) => {
  // This injects a `<script>` tag into the DOM. Right-click and inspect the
  // site preview on the right, and look for the `<script>` tag under `<div id="app">`.
  // You should see that on the second-last line of the script, there is a bare `%s` with
  // no quotes around it. This throws a `SyntaxError` in my browser.
  return <InitColorSchemeScript attribute="[data-color-scheme=%s]" />;
};

Steps:

1. Right-click and inspect the site preview on the right, and look for the <script> tag under <div id="app">. You should see that on the second-last line of the script, there is a bare %s with no quotes around it. This throws a SyntaxError in my browser.

Current behavior

No response

Expected behavior

No response

Context

needs to have quotes around ${value}.

Your environment

System:
OS: macOS 14.6.1
Binaries:
Node: 18.19.1 - ~/.asdf/installs/nodejs/18.19.1/bin/node
npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm
pnpm: 9.7.1 - ~/.asdf/installs/nodejs/18.19.1/bin/pnpm
Browsers:
Chrome: 127.0.6533.120
Edge: Not Found
Safari: 17.6
npmPackages:
@emotion/react: 11.13.3 => 11.13.3
@emotion/styled: 11.13.0 => 11.13.0
@mui/icons-material: 6.0.0-rc.0 => 6.0.0-rc.0
@mui/lab: 6.0.0-beta.7 => 6.0.0-beta.7
@mui/material: 6.0.0-rc.0 => 6.0.0-rc.0
@mui/system: 6.0.0-rc.0 => 6.0.0-rc.0
@mui/x-data-grid: 7.14.0 => 7.14.0
@mui/x-date-pickers: 7.14.0 => 7.14.0
@mui/x-tree-view: 7.14.0 => 7.14.0
@types/react: 18.3.4 => 18.3.4
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
typescript: ^5.2.2 => 5.3.2

Search keywords: css variables, InitColorSchemeScript, %s