When I build and publish my React application which uses Material-UI, to SharePoint Online I see a couple of small styling issues. It appears SPO's styling is being inherited by my Material-UI components in some places and I'm wondering if there's a way to better isolate them at the application level.

For example, my card action buttons function but are stretched horizontally. card action button

Also, my TextField components still have the nice floating label effect, but get a border around them. textfield elements

Note that this application is not a SPFx project. Thanks for any help!

1 Answer 1


It's been awhile since I worked in the situation that you are describing (MaterialUI and React within Sharepoint Online) but if I remember correctly, I used MaterialUI's higher order component withStyles to help get the styling into the component.

Check it out: https://material-ui.com/styles/basics/#higher-order-component-api

  • Thanks, I'll give it a look!
    – Jason
    Jun 17, 2019 at 20:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.