In my React/Typescript component I render a <Link />
component whenever the value (data.link?.text
and data?.link?.url
) is added by the CMS.
{data.link?.text && data?.link?.url && (
<Link to={data?.link?.url}>
)}
I use Typescript Optional Chaining to conditionally render the Link
or not. So if the text
and url
of the link field are filled it renders the <Link />
component.
The Link type:
export type Link = {
link: {
url: string;
text: string;
};
}
If the Link
component doesn't exist on the page/isn't rendered I want to add some styling (margin-bottom
) to the List
component.
The structure of the component looks like this:
<List>
<div css={styles.list}>
// Mapped list items here
</div>
</List>
{data.link?.text && data?.link?.url && (
<Link css={styles.link} to={data?.link?.url}>
{data.link.text}
</Link>
)}
So somehow I have to create a boolean and based on that boolean, in my MyComponent.styles.ts
I can do something like:
margin-bottom: ${haslink ? `0` : `35px`};
question from:
https://stackoverflow.com/questions/65868865/conditional-styling-based-on-whenever-there-is-a-certain-field-value-added-by-cm 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…