inline не определяется в пользовательском интерфейсе материала при предоставлении свойства css

Question

• Я пытаюсь изменить css для материала -ui
• когда я даю ширину, она работает нормально, но когда я даю отображение на экране, я получаю сообщение об ошибке ---> inline не определено
• Подскажите, как это исправить.
• предоставив мой фрагмент кода и песочницу ниже

https://codesandbox.io/s/mzj2zp6y0p

<Tabs
            value={value}
            onChange={this.handleChange}
            scrollable
            scrollButtons="on"
            indicatorColor="primary"
            textColor="primary"
            style={{ width: 500 }}
          >
            <Tab
              style={{ display: inline }}
              label="Item One"
              icon={<PhoneIcon />}
            />
            <Tab label="Item Two" icon={<FavoriteIcon />} />

          </Tabs>

Answer 1

Вы должны поставить его в кавычки, например, так как на самом деле вы пишете не CSS, а JSS:

<Tabs
  value={value}
  onChange={this.handleChange}
  scrollable
  scrollButtons="on"
  indicatorColor="primary"
  textColor="primary"
  style={{ width: 500 }}
>
    <Tab
        style={{ display: 'inline' }}
        label="Item One"
        icon={<PhoneIcon />}
    />
    <Tab label="Item Two" icon={<FavoriteIcon />} />

</Tabs>

Answer 2

Реакт считает, что inline - это переменная, на которую вы пытаетесь сослаться. Вы должны поместить это в кавычки, и тогда это должно работать отлично. style = {{display: "inline"}}