Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

Question

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

After setting up my react project using the typescript template, I decided to style the material-ui Button component using the 'styled' method from the styled-components library as shown below:

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

type StyledButtonProps = ButtonProps & { primary?: boolean }


const styledButton = styled(Button)`
  background-color: ${(props: StyledButtonProps) => props.primary ? "palevioletred" : "white"};
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 7px 14px;

  &:hover {
    background-color: aqua;
  }

  & .MuiButton-label {
    color: #070303;
  }
` as React.ComponentType<StyledButtonProps>

export default styledButton;

Everything seemed to be working fine until I tried to use this Styled button with a boolean value for primary. However, an unexpected warning message appeared when I attempted to implement it like so:

<StyledButton primary={true}>Styled Buton</StyledButton>

The warning message that popped up can be viewed here.

I'm puzzled as to why this warning is occurring. Any suggestions on how to resolve it?

css reactjs typescript material-ui styled-components

Answer 1

Answer №1

When using styled-components, be mindful that the DOM only accepts string values like primary="true", not boolean values like primary=true. Therefore, make sure to change any instances of true to "true" to ensure proper rendering on the DOM.

If you switch from primary={true} to primary="true", the primary attribute will be correctly displayed in the DOM as shown here: https://i.stack.imgur.com/Ga2Bl.png

However, if you prefer not to render the primary property on the DOM, you can use Transient props to dismiss the warning:

To prevent passing a specific property to the DOM, simply prefix it with a dollar sign ($). This way, styled-components will avoid passing that property to the DOM. Check out the documentation for more information.

<StyledButton $primary={true}>Styled Button</StyledButton>

...

background-color: ${(props: StyledButtonProps) =>
    props.$primary ? "palevioletred" : "white"};
...

For a demo, you can visit the codesandbox link.

Answer 2

When using styled-components, be mindful that the DOM only accepts string values like primary="true", not boolean values like primary=true. Therefore, make sure to change any instances of true to "true" to ensure proper rendering on the DOM.

If you switch from primary={true} to primary="true", the primary attribute will be correctly displayed in the DOM as shown here: https://i.stack.imgur.com/Ga2Bl.png

However, if you prefer not to render the primary property on the DOM, you can use Transient props to dismiss the warning:

To prevent passing a specific property to the DOM, simply prefix it with a dollar sign ($). This way, styled-components will avoid passing that property to the DOM. Check out the documentation for more information.

<StyledButton $primary={true}>Styled Button</StyledButton>

...

background-color: ${(props: StyledButtonProps) =>
    props.$primary ? "palevioletred" : "white"};
...

For a demo, you can visit the codesandbox link.

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

Answer №1

Similar questions

Developing an authentication strategy in Next.js for securing private pages and implementing a custom layout

What might be the reason for jQuery not functioning in Internet Explorer 11?

Enhancing a React modal to enable user input for updating state variables

How to delete an item from an object in TypeScript

Manipulate component properties using CSS hover in React with Material-UI

Attempted to register two components under the identical name RTCVideoView in React Native

Easily send numerous images to ImageKit using the React SDK that's readily available

Unable to remove the vertical dropdown menu padding issue in Firefox

Scrolling to does not function properly with Material UI tabs

Is it possible to utilize Babel for transpiling, importing, and exporting in the client, all without relying on Web

Error: Unable to access the 'registerControl' property of the object due to a type mismatch

Implementing generics in TypeScript for objects made easy with this guide!

What is the process for transferring an existing collection or data in Firestore to a subcollection?

Steps to resolve the error message 'Argument of type 'number' is not assignable to parameter of type 'string | RegExp':

Running npm start in a React development environment on Linux without automatically opening a browser can be achieved by configuring

Troubleshooting CSS3 pulse animation failure in Internet Explorer and Firefox

Emphasize the current page's menu item for the user viewing it

Learn the art of animating "basic jQuery filtering" exclusively with CSS

Searching for a way to access the HTTP request header using ReactJS?

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and