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

I often find that jscodeshift consistently avoids processing my JavaScript files

React Native Navigation - Utilizing Duplicates of a Screen

Angular - Issue with Function Observable<number> in Development

The project is not being recognized by 'webpack' when running within it

Bug in Next.js caused by downgrading and then reinstalling the original version of Node

Step-by-step guide on implementing virtual scroll feature with ngFor Directive in Ionic 2

When the parent element has a fixed position, the child element will no longer maintain its floating property

Tips for efficiently utilizing Hooks with React Context:

Easiest method to change cursor to 'wait' and then return all elements to their original state

Why does the 401 error continue to persist while attempting to log in using Google Identity service on my Laravel application?

When jQuery adds new elements, their CSS may not be applied accurately

In the event that the get request fails, go ahead and clear the

HTML button failing to connect with CSS stylesheet

The mysterious height phenomenon when setting the width of a list item with jQuery

creating a randomized location within an HTML element using JavaScript

There was a TypeError that was not caught in the promise, stating that the function window.showOpenFilePicker is not valid

Tips for getting free jqgrid to display frozen column borders in the search toolbar

I am having trouble getting my footer to align properly in a vertical position

Add a pair of assorted div elements to a shared container

How to create a collapsible nested list feature in ReactJs for a single list item