How do I add styles to a component that is passed as prop in React?

Question

I have a component that is passed as a label prop. I need to add width: 100% for it because otherwise, I cannot use justify-content: space between for my div. Here is how it looks like in developer tools.

return (
    <div className={classes.row}>
      <Checkbox
        value={deviceId}
        className={classes.checkbox}
        checked={Boolean(selected)}
        onChange={handleToggle}
        label={
          <div>
            <Tooltip title={t('integrations.deviceEUI')} placement={'top-start'}>
              <Typography variant="body1" className={classes.item}>
                {deviceEui}
              </Typography>
            </Tooltip>
            <Tooltip title={t('integrations.deviceName')} placement={'top-start'}>
              <Typography variant="body1" className={classes.item}>
                {name || ''}
              </Typography>
            </Tooltip>
          </div>
        }
      />
    </div>
  );
};

Answer 1

I'm not sure I fully understand the issue, but if you want to simply add styles to a React component, you can simply do the following:

cont labelStyle = {
   width: '100%'
};

Then inside your return statement, you could attach this labelStyle to the parent <div> like so:

<div style={labelStyle}>
   //other components 
</div>

If this isn't what you really mean, then please consider outlining the issue a little more clearly, thanks!