如何在 React 中指定多个宽度

【问题标题】：How to specify multiple width in React如何在 React 中指定多个宽度
【发布时间】：2021-10-22 20:55:29
【问题描述】：

我在下一行代码中指定了内联 CSS，问题是宽度属性。

<li style={{ display: "inline-block", listStyle: "none", width: "-webkit-fill-available" }}>

我还需要指定 Firefox 内联宽度 -moz-fit-content 但我不知道语法，我已经尝试过了。

<li style={{ display: "inline-block", listStyle: "none", width: "-webkit-fill-available", width: "-moz-fit-content " }}>

但它不起作用。

【问题讨论】：

如果内联 CSS 不是必须的，您可以使用第二种方法定义一个类

标签： reactjs react-native react-hooks

【解决方案1】：

您可以在 css 中使用具有相同属性的类，并改用 className。

这是一个例子：

class SampleApp extends React.Component {
  render() {
    return (<div className={'foo'}>foo</div>);  
  }
}

ReactDOM.render(<SampleApp />, document.querySelector("#app"));

.foo {
     width: 50px;
     width: -webkit-fill-available;
     width: -moz-fit-content;
     
     /* not important */
     background-color: #f4f4f4;
     border: 1px dashed #ccc;
     padding: 10px;
     box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

【讨论】：