Блог

Главная - Вопросы по программированию - В react маленький круг выглядит как эллипс

В react маленький круг выглядит как эллипс

#css #reactjs #material-ui

Вопрос:

Я хочу создать кнопку в форме круга в react. Он работает для больших размеров (px > 100), но выглядит как эллипс для меньших пикселей.

 return (
<React.Fragment>
  <ThemeProvider theme={theme}>
    <Button style= {{  
      width:'10px',
      height:'10px',
      borderRadius:'50%',
      fontSize:'10px',
      color:'#fff',
      lineHeight:'50px',
      textAlign:'center',
      background:'#000'
      }} 
      variant="contained" color="secondary">
      {"Theme nesting"}
    </Button>
  </ThemeProvider>
</React.Fragment>
  );

Вот как это выглядит:

введите описание изображения здесь

Я знаю, что CSS правильный, так что же вызывает такое поведение?

Комментарии:

1. Вам придется показать нам, какой еще стиль применяется. Я предполагаю, что это ширина кнопки. Это действительно вопрос CSS и HTML, и его следует рассматривать как таковой.

2. Никакой другой стиль не применяется, удаление ThemeProvider дает тот же результат

3. Щелкните правой кнопкой мыши -> проверить ->> найдите переопределяющий css в вычисляемом стиле. Как указал Ишервуд, первое предположение было бы, возможно, материал или что-то имеет селектор элементов с похожим button { width: 123px !important } или чем-то еще

Ответ №1:

Существуют и другие стили CSS, применяемые к интерфейсу Button from Material-UI (в основном padding: 6px 16px; и min-width: 64px ).

Это отобразит черный круг:

 <ThemeProvider theme={theme}>
  <Button 
    style={{  
      width: "10px",
      height: "10px",
      borderRadius: "50%",
      fontSize: "10px",
      color: "#fff",
      lineHeight: "50px",
      textAlign: "center",
      background: "#000",
      minWidth: "unset",
      padding: "0"
    }} 
    variant="contained" 
    color="secondary"
  >
    Theme nesting
  </Button>
</ThemeProvider>

Тем не менее, лучшей альтернативой использованию style свойства было бы использование их API-интерфейса для переопределения CSS (например, создание стилей с тематизацией).

Метки: