Переопределить стили кнопки Material-UI с помощью Styled-компонентов - PullRequest
Новая
       58

Переопределить стили кнопки Material-UI с помощью Styled-компонентов

1 голос
/ 17 марта 2020

Я использую material-ui button и пытаюсь переопределить радиус границы (т. Е. Сделать его 0) с помощью стилевых компонентов. Тем не менее, это не работает.

Код: 

import React from "react";
import styled from "styled-components";
import { Button } from "@material-ui/core";

const StyledButton = styled(Button)`
  background-color: #d29d12;
  border-radius: 0;
`;

export default function App() {
  return <StyledButton>Hello</StyledButton>;
}

Ответы [ 3 ]

2 голосов
/ 17 марта 2020

По умолчанию пользовательский интерфейс Material внедряет стили в конце элемента <head>. Это означает, что его стили придут после стилей, сгенерированных стилями-компонентами, и, таким образом, стили Material-UI победят стили стилей-компонентов, когда CSS специфичность одинакова.

Вы можете использовать компонент StylesProvider со свойством injectFirst, чтобы переместить стили Material-UI в начало <head>, а затем стили стилевых компонентов последуют за ним и победят. 

import React from "react";
import styled from "styled-components";
import Button from "@material-ui/core/Button";
import { StylesProvider } from "@material-ui/core/styles";

const StyledButton = styled(Button)`
  background-color: red;
  border-radius: 0;
`;

export default function App() {
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <StyledButton>Hello</StyledButton>
      </div>
    </StylesProvider>
  );
}

Edit styled-components

Связанные ответы:

1 голос
/ 17 марта 2020

Можно попытаться использовать withStyles для переопределения импортированного компонента материала-интерфейса 

import {
  withStyles,
  Button as BaseButton,
} from '@material-ui/core';

const buttonStyles = {
  root: {
    // You can add customized nesting selector here
    backgroundColor: "#d29d12",
    borderRadius: 20
  },
  otherAttributes: {
  },
};

const Button = withStyles(buttonStyles)(BaseButton);

// Then you can use your customized <Button /> as normal

enter image description here

Попробуйте онлайн:

Edit lingering-night-vno6k

0 голосов
/ 17 марта 2020

Вы можете переопределить радиус границы по умолчанию для кнопки, применив! Важное для вашего стилизованного компонента. 

const StyledButton = styled(Button)`
  borderRadius: 0px !important;
`;
...