Getting classname / use styles for i18next + dangerouslySetInnerHTML

[xairoo]

I am using dangerouslySetInnerHTML to style some text inside a translation (i18next) - not the full text, only some parts of it. I am still not sure how to pass the style to the header, just to access the style with the class or just how to get the classname 😕

Result should be:

<div
	dangerouslySetInnerHTML={{
		__html: i18next.t('foobar', {
			tagStart: '<span class="_NEEDED_">',
			tagEnd: '</span>',
		}),
	}}
/>

const customStyle = [
	css`
		color: var(--tw-gradient-from);
		background: none;
		${tw`from-green-850 to-green-400`}
	`,
];

An other option would be to create the element, the style gets placed in the header:

const Span = (
	<span
		css={[
			css`
				color: var(--tw-gradient-from);
				background: none;
				${tw`from-green-850 to-green-400`}
			`,
		]}
	/>
);

But no idea how to get the classname. Span.props.css[0].name won't work.

Any ideas how to solve this? Perhaps I can just get the opening tag, that would be fine too. But no idea how to do that.

Thanks for your ideas/hints!

[xairoo]

Okay, never used GlobalStyles before. But this works.

import { Global, css } from '@emotion/react';
import tw, { GlobalStyles as BaseStyles } from 'twin.macro';

const customStyles = css`
	.colored {
		${css`
			color: var(--tw-gradient-from);
			background: none;
			${tw`from-green-850 to-green-400`}
		`}
	}
`;

const GlobalStyles = () => (
	<>
		<BaseStyles />
		<Global styles={customStyles} />
	</>
);

export default GlobalStyles;

But I am still looking for a solution that is based on my initial post. Classnames look so cool ;-)