reactjs - 如何在 React 中指定多个宽度

Question

我有下一行代码，我指定内联 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 " }}>

但它不起作用。

标签： reactjsreact-nativereact-hooks

Answer 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>