reactjs - Reference to theme's primary color instead of a specific color in Material UI -

using reactjs, , material ui, have project in have changed theme colors.

const newtheme = getmuitheme({     fontfamily: 'roboto, sans-serif',     palette: {         primary1color: cyan500,         primary2color: cyan700,         primary3color: grey400,         accent1color: ambera400,         accent2color: grey100,         accent3color: grey500,         textcolor: darkblack,         alternatetextcolor: white,         canvascolor: white,         bordercolor: grey300,         disabledcolor: fade(darkblack, 0.3),         pickerheadercolor: cyan500,         clockcirclecolor: fade(darkblack, 0.07),         shadowcolor: fullblack,     }, });    // app class   render() {     return(         <muithemeprovider muitheme={newtheme}>             <project />         </muithemeprovider>     )   } 

everything works expected. components, buttons have ability set color based on primary prop. however, have component uses icon needs primary color. can import color , set directly:

import react 'react'; import actionlock 'material-ui/svg-icons/action/lock'; import {cyan500} 'material-ui/styles/colors';  export default class lockicon extends react.component {     render() {         return(             <actionlock color={cyan500} />         )     } } 

is there way reference theme's primary color, rather setting color in each component individually? like:

import react 'react'; import actionlock 'material-ui/svg-icons/action/lock'; import {primary1color} 'somewhere';  export default class lockicon extends react.component {     render() {         return(             <actionlock color={primary1color} />         )     } } 

yes have! using muithemeable..

import muithemeable 'material-ui/styles/muithemeable'; class lockicon extends react.component {     render() {         return(             <actionlock color={this.props.muitheme.palette.primary1color} />         )     } }         export default muithemeable()(lockicon) 

from material-ui docs