Bump specificity of generated className

[nrakochy]

Thanks for the great library 👍

I understand that JSX pragma transforms sx props into className at runtime. This appears to be working well in my project, and it's quite an elegant approach I might add.

Is there any way to bump the specificity of the generated className? I am having a bit of difficulty with some global css that tends to get very specific. My goal is to wrap some of these components, and expose the sx property as an api in a shared component library for other devs to consume, and the global fades away.

As stands now

/** @jsxImportSource theme-ui */

import { Button as VendorButton, ButtonProps } from "libraryIdontcontrol";
import { SxProp } from "@theme-ui/core";
import { ReactNode } from "react";

export interface MyButtonProps extends ButtonProps {
    sx?: SxProp;
    children?: ReactNode;
}

export function Button(props: MyButtonProps) {
    return <VendorButton {...props} />;
}

If I could increase specificity somehow via /** @jsxImportSource theme-ui */, the magic would be complete.
I have tried a few different flavors of this

import styled from "@emotion/styled";

const StyledButton = styled(BPButton)`
    &&& {
        ....more here
    }
`;

export function Button(props: ButtonProps) {
    return <StyledButton {...props} />;
}

but it loses the simplicity of the sx api. Any insights or recommendations would be appreciated!

[hasparus]

Good news for you — && still works.

sx={{
  '&&': myStyles
}}

[nrakochy]

Good news for you — && still works.

sx={{
  '&&': myStyles
}}

Good news indeed. Many thanks 🙏