CODEWITHSUNDEEP
reactjsmaterial-ui
Sharath
Sharath

Reputation: 2428

How do I change font color in DialogTitle and DialogContent in Material UI in react.js

How do I change font/text color in DialogTitle and DialogContent in Material UI in react.js

Changing background color for Dialog works but trying to change font color for Dialog and DialogContent doesn't work..

<Dialog
    open={this.state.open}
    aria-labelledby="alert-dialog-title"
    aria-describedby="alert-dialog-description"
    PaperProps={{
       style: {
           backgroundColor: "#fff",
       },
    }}
    >

    <DialogTitle id="alert-dialog-title">
         "Use Google's location service?"
    </DialogTitle>

    <DialogContent>
         <DialogContentText id="alert-dialog-description">
              Hello 
         </DialogContentText>
    </DialogContent>

    <DialogActions>
         <Button onClick={this.handleClose} color="primary">
                OK
         </Button>
    </DialogActions>
</Dialog>

Upvotes: 3

Views: 24952

Answers (4)

Yatrix
Yatrix

Reputation: 13775

I don't see a way via the API and I'm not a fan of element selectors, so style just what you need to. Wrap the value in a span like you would html. I used the style attribute, but use whatever is consistent with how you're handling your css. 

<DialogTitle id="alert-dialog-title">
     <span style={{color: 'red'}}>Use Google's location service?</span>
</DialogTitle>

Just because you're in React doesn't mean you should shy away from the most basic of solutions. For my money, a span works fine vs creating another component, unless you need to reuse this exact same set-up elsewhere. In which case, I'd probably create a generic MyCustomDialog that meets your needs and reuse the entire thing where you need to.

Upvotes: 4

Klay
Klay

Reputation: 93

Overide DialogTitle 'root' class: 

root: {
    backgroundColor: theme.palette.primary.main,
    '& h6': {
      color: 'red'
    }
  }

If you want to have all dialogs changed, then do this globally by overriding theme:

MuiDialogTitle: {
      root: {
        backgroundColor: theme.palette.primary.main,
        '& h6': {
          color: 'red'
        }
      }
    }

Upvotes: 8

xcsrz
xcsrz

Reputation: 81

I came across this challenge myself. The DialogTitle component has an oddly empty CSS API. The docs suggest you to set disableTypography={false} and supply your own internal DOM elements. This will work, but will also force you to style the entire element yourself (using the Typography component shave off some of this).

However, the Customization > Overrides section of the docs (https://material-ui.com/customization/overrides/) points out:

The jss-nested plugin (available by default) can make the process of increasing specificity easier."

That page outlines how to make global changes across your entire theme. However, if you're just looking to customize the text color on a single dialog here is a working example from your snippet:

import React, { Component } from 'react'
import Dialog from '@material-ui/core/Dialog'
import DialogTitle from '@material-ui/core/DialogTitle'
import DialogContent from '@material-ui/core/DialogContent'
import DialogContentText from '@material-ui/core/DialogContentText'
import DialogActions from '@material-ui/core/DialogActions';
import Button from '@material-ui/core/Button'

import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({
    styledHeader: {
        background: 'black',
        '& h2': {
          color: 'white',
        }
    }
})

class Modal extends Component {
    state = {
        open: true,
    }
    render() {
        return(
            <Dialog
                open={this.state.open}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
                PaperProps={{
                   style: {
                       backgroundColor: "#fff",
                   },
                }}
                >

                <DialogTitle id="alert-dialog-title" className={this.props.classes.styledHeader}>
                     "Use Google's location service?"
                </DialogTitle>

                <DialogContent>
                     <DialogContentText id="alert-dialog-description">
                          Hello 
                     </DialogContentText>
                </DialogContent>

                <DialogActions>
                     <Button onClick={this.handleClose} color="primary">
                            OK
                     </Button>
                </DialogActions>
            </Dialog>
        )
    }
}

export default withStyles(styles)(Modal)

Upvotes: 2

Aliaksandr Sushkevich
Aliaksandr Sushkevich

Reputation: 12364

The easiest way to do this is just to create a new component and add custom styles to it.

const Title = ({ children }) => <div className="title">{children}</div>;

<DialogTitle id="alert-dialog-title">
  <Title>{"Use Google's location service?"}</Title>
</DialogTitle>

css

.title {
  color: brown;
}

Another way is to use className or classes. But this way you'll have to add specificity to your styles

<DialogTitle
  id="alert-dialog-title"
  className="title"              // one of these you don't need both
  classes={{ root: "title" }}    // one of these you don't need both
>
  {"Use Google's location service?"}
</DialogTitle>

css

.title > * {
  color: brown !important;
}

Upvotes: 4

Related Questions