This banner is still pretty grim.
The banner in the official docs, is very clean:
https://polaris.shopify.com/components/feedback-indicators/banner
I have forked the official Polaris Banner on Codesandbox:
https://codesandbox.io/p/sandbox/hopeful-hypatia-38xhlg?file=%2FApp.tsx%3A13%2C1
And set the version to 12.0.0, which matches my version.
And the correct banner is displayed?
I really don’t understand why this is happening?
I am using a Remix App and have added the Polaris stylesheet reference to the root file, at app/root.jsx:
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
// @ts-ignore
import polarisStyles from "@shopify/polaris/build/esm/styles.css";
// @ts-ignore
import appStyles from './assets/css/style.css';
export const links = () => [
{
rel: "stylesheet",
href: polarisStyles
},
{
rel: "stylesheet",
href: appStyles
}
];
export default function App() {
return (
<html>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<LiveReload />
<Scripts />
</body>
</html>
);
}
All the routes, in folders below this file, like the app/routes folder, will now inherit both style sheets.
And the default style.css is certainly working in my other routes.
Interestingly, I have noticed that the Banner in my Remix App, is built with the class:
<div class="Polaris-Banner Polaris-Banner--withinContentContainer" tabindex="0" role="status" aria-live="polite">
And, the Banner in the Codesandbox App, the class is slightly different:
<div class="Polaris-Banner Polaris-Banner--withinPage" tabindex="0" role="status" aria-live="polite">
