Merge pull request #2324 from rolandpoulter/custom-title-styles

[AppBar] Adds titleStyle prop
mui · Dec 1, 2015 · f80584d · f80584d
2 parents e47c759 + a0453e1
commit f80584d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx
@@ -79,6 +79,12 @@ export default class AppBarPage extends React.Component {
             desc: 'Determines whether or not to display the Menu icon next to ' +
                   'the title. Setting this prop to false will hide the icon.',
           },
+          {
+            name: 'titleStyle',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the app bar\'s title element.',
+          },
           {
             name: 'title',
             type: 'node',

diff --git a/src/app-bar.jsx b/src/app-bar.jsx
@@ -38,6 +38,7 @@ const AppBar = React.createClass({
     iconElementLeft: React.PropTypes.element,
     iconElementRight: React.PropTypes.element,
     iconStyleRight: React.PropTypes.object,
+    titleStyle: React.PropTypes.object,
     title: React.PropTypes.node,
     zDepth: PropTypes.zDepth,
   },
@@ -137,6 +138,7 @@ const AppBar = React.createClass({
   render() {
     let {
       title,
+      titleStyle,
       iconStyleRight,
       showMenuIconButton,
       iconElementLeft,
@@ -163,8 +165,8 @@ const AppBar = React.createClass({
       // If the title is a string, wrap in an h1 tag.
       // If not, just use it as a node.
       titleElement = typeof title === 'string' || title instanceof String ?
-        <h1 onTouchTap={this._onTitleTouchTap} style={this.prepareStyles(styles.title, styles.mainElement)}>{title}</h1> :
-        <div onTouchTap={this._onTitleTouchTap} style={this.prepareStyles(styles.title, styles.mainElement)}>{title}</div>;
+        <h1 onTouchTap={this._onTitleTouchTap} style={this.prepareStyles(styles.title, styles.mainElement, titleStyle)}>{title}</h1> :
+        <div onTouchTap={this._onTitleTouchTap} style={this.prepareStyles(styles.title, styles.mainElement, titleStyle)}>{title}</div>;
     }
 
     if (showMenuIconButton) {