Customizing Material-UI Components with Styled-Components

» javascript » Customizing Material-UI Components with Styled-Components

By : Maxime

Date : January 12 2021, 09:11 PM

I hope this helps . 'direction' Prop in Material-UI Grid Defines the flex-direction style property.
So, if you want to override that style using styled-components, you need to use flex-direction instead of direction. Here is an example:

code :

const MyGrid = styled(Grid)`
  flex-direction: column;
`

Share :

Using Material Icons with Styled Components

By : JohnRain62

Date : March 29 2020, 07:55 AM

hope this fix your issue For the styled(AnyComp) notation to work AnyComp needs to accept the incoming className prop and attach it to a DOM node.
For your example to work MaterialIcon has to use the passed in className, otherwise the styles are injected but no DOM node is targeted:

code :

const MaterialIcon = (props) => (
  <i className={`material-icons ${props.className}`}>account_balance</i>
);

// WORKS 
const Icon = styled(MaterialIcon)`
  background-color: green;
  font-size: 50px;
`;

How to style material ui next components with styled components and SASS

By : Ankur Singla

Date : March 29 2020, 07:55 AM

To fix the issue you can do You should be able to pass the name of the class from your sass file to the classes object.

code :

classes={{
  paper: `SASS_CLASS_NAME_HERE`,
}}

How to theme components with styled-components and Material-UI?

By : user3604829

Date : March 29 2020, 07:55 AM

will be helpful for those in need You can use withTheme to inject the theme as a prop.

code :

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

const StyledDiv = withTheme(styled.div`
  background: ${props => props.theme.palette.primary.main};
  color: ${props => props.theme.palette.primary.contrastText};
`);
export default function App() {
  return (
    <StyledDiv>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </StyledDiv>
  );
}

Further customizing Material UI components?

By : Book Leaf

Date : March 29 2020, 07:55 AM

I wish this helpful for you In the documentation of the material-ui, under the section of switches → subsection of checkboxes, you ll find that there are 2 props for overriding the default styles of the component:
iconStyle (referring to the style of the checkbox icon)

why do we need to install gatsby-plugin-styled-components after installed styled-components

By : Anatoliy Khlebnikov

Date : March 29 2020, 07:55 AM

may help you . The answer is that just using styled-components will result in styled-components being applied on client JavaScript runtime. So sometimes, when you load your Gatsby site, you will see the styles you've written with styled-components-components not immediately on your website but they will be applied after some delay which can result in some weird visual effect (elements jumping around, or changing in color / size / other properties).
gatsby-plugin-styled-components makes sure the styles will be delivered to the client right from the HTML.