I am using template literals to show my data in react, but I want to style that email, how can I be able to apply inline style on that template literal, is there any possibility to do it? {`${eachCustomer?.name} <${eachCustomer?.email}>`}
Template literals output strings. Styles apply to elements. The idea of applying style to a template literal doesn't make sense.
If you want to apply styles, then create elements. Use JSX. eg
return <>
{eachCustomer?.name} <<StyledEmailComponent>{eachCustomer?.email}</StyledEmailComponent>>
</>;
Try this
{`${eachCustomer?.name} ${eachCustomer?.email ? <span style={{ color: 'red' }}>{eachCustomer.email}</span> : null}`}
I'd like to leave this answer here for those looking to style dynamic strings made using template literals. It's possible to use a tag function and assign a css class only to the variables in the template string, thus styling dynamic values only.
export const highlight = (strings: TemplateStringsArray, ...values: (string | number)[]) => {
let str = '';
strings.forEach((string, i) => {
str += `${string} <span class='hl'>${values[i] || ''}</span>`;
});
return str;
};
You can then use it like this in React:
<p
dangerouslySetInnerHTML={{
__html: highlight`User ${userAddress} claimed ${tokenAmount} ${token.symbol}.`
}}
/>
This article by Wes Bos helped me solve that.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.