reactjs / javascript：动态更改填充

Question

我正在使用 reactjs。当我的网站是英文时，我有完美的填充（padding: 0 1.7em 0 0;）。但是，当站点为德语时，我需要填充更接近padding: 0 0.55em 0 0;。我的网站的所有其他语言都在这些填充之间进行了翻译。德语的导航栏（这是我正在使用此填充处理的内容）在 2 行上有链接，在 1.7em 的填充下我不能拥有这些链接。然而，当我将其更改为 0.55em 时，英文网站看起来太拥挤了。当我切换到 % 时，唯一有效的 % 是 1%。英语 1% 的填充看起来非常狭窄，而德语网站看起来还不错。

问题： 我能做些什么？有没有办法获取链接<p>'s 的大小，然后在 css 中执行 calc()？还是在js中？这将允许更改每种语言。因此，也许可以通过更改 css 的状态来实现... idk，我对完全了解我试图传达的内容有所反应。

Answer 1

我的第一个建议是让您的<p> 稍宽一些，因为这是最简单的做法。失败：

查找用户使用window.navigator.language设置的语言

然后使用 react 生成一个 css 规则让您的页面遵守。确保在包含所有其他样式后打印规则，这样填充值不会被您的默认设置覆盖。