Exist a way to generate the style object or classNames to be used in other third party libraries?

[ChristianHardy]

💬 Questions and Help

Hello, and thanks for advance.

I'm currently working with GatsbyJS, Gatsby have their own Link component and only can be customized via styles properties or classNames.

So I create an Wrap to encapsulate the Link component (AKA XLink component), I want to receive the common Xstyled props to generate later an style properties, here is an Example to help understanding my doubt.

import { Link } from 'gatsby';
import {
    SpaceProps,
    TypographyProps,
} from '@xstyled/styled-components';

export type XLinkProps = SpaceProps & TypographyProps & {
    children?: React.ReactNode;

    // Gatsby Link props
    to: string;
    activeClassName?: string;
    activeStyle?: React.CSSProperties;
    partiallyActive?: boolean;
};

function XLink(props: XLinkProps) {
    const { to, activeClassName, activeStyle, partiallyActive, ...xstyledProps } = props;

    // Something magic here to generate style object based on xstyled props
    const style = someFunctionToGenerateCSSStyles(xstyledProps);
    const className = someFunctionToGenerateClassNames(xstyledProps);

    return (
        <Link to={to} style={style} className={className}>
            { children }
        </Link>
    );
}

export { XLink };

// Usage example
<XLink to="/about" color="primary" mx={{_: 2, md: 5}}>About</XLink>