solid-styled-components
solid-styled-components copied to clipboard
What is the purpose of class `go11`?
A lot of elements has class name go11
. This make a lot of conflicts if element don't has some styles, and I want to apply them to it depending on some parent. Every unique element must have his own unique className.
const WeatherWidget = styled<"div">(({ ...props }) => {
<WidgetContainer {...props}>...</WidgetContainer>;
})``;
export const Weather = styled<"div">(({ ...props }) => {
return (
<Show when={store.showWeatherWidget}>
<WeatherWidget {...props} />
</Show>
);
})``;
export const Header = styled("div")`
display: grid;
grid-template-columns: 30px 280px auto 1fr;
align-items: start;
gap: 32px;
${Weather.className} {
grid-column: 2 / 4;
}
`;
I think this something Goober does. It's the library we use under the hood. I think they might have more info in their docs: https://github.com/cristianbote/goober
I think this something Goober does. It's the library we use under the hood. I think they might have more info in their docs: https://github.com/cristianbote/goober
May be you right, may be not. Goober generates unique classname for unique block of styles. And for empty block of styled, it generate class name go11
. There is nothing special. But the way in witch it nesting styles is different. And I there is the issue, I think.
There is an simple example: https://codesandbox.io/s/solidjs-zdeu5?file=/src/App.tsx
import { styled } from "solid-styled-components";
const ChildA = styled("div")``;
const ChildB = styled("div")``;
const Parent = styled("div")`
&:hover {
${ChildA.className} {
color: red;
}
${ChildB.className} {
color: blue;
}
}
`;
export const App = () => {
return (
<Parent>
<ChildA>ChildA</ChildA>
<ChildB>ChildB</ChildB>
</Parent>
);
};