如何向React中作为道具传递的组件添加样式

Question

我有一个作为标签道具传递的组件。我需要为它添加width:100%，因为否则，我不能为我的div使用justify-content:space。以下是它在开发人员工具中的样子。

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

我不确定我是否完全理解这个问题，但如果你想简单地向React组件添加样式，你可以简单地执行以下操作：

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

然后在您的返回语句中，您可以将此labelStyle附加到父<div>，如下所示：

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

如果这不是你真正的意思，那么请考虑更清楚地概述这个问题，谢谢！

Answer 2

在这个问题的React Native版本中，您可以简单地给出"风格"；道具到组件为：

const NewComponent = ({style}) => {}

现在您可以访问"；风格"；来自另一个文件的道具。

现在，"；风格"；道具可用于"；NewComponent"；，编写以下代码：

<NewComponent style={{}}/>