CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
softshipper
softshipper

Reputation: 34119

How to apply the color from selected theme

I am using https://material-ui-next.com/ as following: 

import React, { Component } from 'react';
import { AppBar, Toolbar } from 'material-ui';
import { Typography } from 'material-ui';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {cyan, blue} from 'material-ui/colors';

const theme = createMuiTheme({
  palette: {
    primary:{
      main:blue[900]
    },
    secondary: cyan, 
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <AppBar position="static">
          <Toolbar>
          <Typography variant="title">
            Hello
          </Typography>          
          </Toolbar>
        </AppBar>
      </MuiThemeProvider>
    );
  }
}

export default App;

As you can see, I changed the primary theme to 

main:blue[900]

But the font color is black. How to change the font color to white?
Looking at https://material-ui-next.com/style/color/, that the font color is white.

The output is: enter image description here

The font color is black but I want to change to white.

Upvotes: 0

Views: 55

Answers (1)

Colin Ricardo
Colin Ricardo

Reputation: 17269

Try changing your theme object to:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: blue[900]
    },
    text: {
      primary: '#fff',
    }
  }
});

Reference: https://material-ui-next.com/customization/themes/

Upvotes: 1

Related Questions