reagent 2022-08-19 | Slack Archive

Kannan Ramamoorthy14:08:29

Hi Everyone, I'm trying to understand how these can be converted into equivalent reagent representation. Any help would be useful. I tried using https://github.com/madvas/jsx-to-clojurescript. But it fails at these places.

const headerSX = {
    p: 2.5,
    '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' }
};

{/* Which is being used as below. And convertin the CardHeader is straight-forward */}

<CardHeader sx={headerSX} title={<Typography variant="h3">{title}</Typography>} action={secondary} />

Another simplified tag,

<Card
                elevation={elevation || 0}
                ref={ref}
                sx={{
                    ...sx,
                    borderRadius: 2,
                    '& pre': {
                        m: 0,
                        p: '16px !important',
                        fontFamily: theme.typography.fontFamily,
                        fontSize: '0.75rem'
                    }
                }}
            >

p-himik14:08:00

[:> Card
 {:elevation (or elevation 0)
  :ref ref
  :sx sx}]

To create sx, I'd gobj/clone the existing sx and then gobj/set "borderRadius" to 2 and "& pre" to #js {:m 0 ...}.

Kannan Ramamoorthy17:08:53

something like this?

(doto (gobj/clone sx)
      (gobj/set "borderRadius" 2)
      (gobj/set "& pre" #js {:m 0 ...}))

Kannan Ramamoorthy17:08:07

I assume it would be similar for the headerSx as well.

p-himik17:08:02

Indeed, although I don't know what you're using gobj/remove instead of gobj/set.

Kannan Ramamoorthy17:08:39

correted. copy-paste error.. Thanks a lot @U2FRKM4TW!

👍 1

2022-08-19

Channels