diff --git a/src/Snackbar/Snackbar.js b/src/Snackbar/Snackbar.js
index e19c67ca50b290..529f39da9c44bd 100644
--- a/src/Snackbar/Snackbar.js
+++ b/src/Snackbar/Snackbar.js
@@ -58,6 +58,10 @@ class Snackbar extends Component {
* The css class name of the root element.
*/
className: PropTypes.string,
+ /**
+ * Override the inline-styles of the content element.
+ */
+ contentStyle: PropTypes.object,
/**
* The message to be displayed.
*
@@ -196,11 +200,12 @@ class Snackbar extends Component {
render() {
const {
autoHideDuration, // eslint-disable-line no-unused-vars
+ contentStyle,
+ bodyStyle,
message: messageProp, // eslint-disable-line no-unused-vars
onRequestClose, // eslint-disable-line no-unused-vars
onActionTouchTap,
style,
- bodyStyle,
...other,
} = this.props;
@@ -217,11 +222,12 @@ class Snackbar extends Component {
diff --git a/src/Snackbar/Snackbar.spec.js b/src/Snackbar/Snackbar.spec.js
index 4d3c2c4c26a32c..875d5d2d46e244 100644
--- a/src/Snackbar/Snackbar.spec.js
+++ b/src/Snackbar/Snackbar.spec.js
@@ -3,13 +3,14 @@ import React from 'react';
import {shallow} from 'enzyme';
import {assert} from 'chai';
import Snackbar from './Snackbar';
+import SnackbarBody from './SnackbarBody';
import getMuiTheme from '../styles/getMuiTheme';
describe('', () => {
const muiTheme = getMuiTheme();
const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});
- describe('props: open', () => {
+ describe('prop: open', () => {
it('should be hidden when open is false', () => {
const wrapper = shallowWithContext(
@@ -74,4 +75,18 @@ describe('', () => {
done();
}, 500);
});
+
+ describe('prop: contentStyle', () => {
+ it('should apply the style on the right element', () => {
+ const contentStyle = {};
+ const wrapper = shallowWithContext(
+
+ );
+
+ assert.strictEqual(
+ wrapper.find(SnackbarBody).props().contentStyle,
+ contentStyle
+ );
+ });
+ });
});
diff --git a/src/Snackbar/SnackbarBody.js b/src/Snackbar/SnackbarBody.js
index 592d87c02daed7..2ca137f311acad 100644
--- a/src/Snackbar/SnackbarBody.js
+++ b/src/Snackbar/SnackbarBody.js
@@ -64,9 +64,10 @@ function getStyles(props, context) {
export const SnackbarBody = (props, context) => {
const {
- open, // eslint-disable-line no-unused-vars
action,
+ contentStyle,
message,
+ open, // eslint-disable-line no-unused-vars
onActionTouchTap,
style,
...other,
@@ -85,7 +86,7 @@ export const SnackbarBody = (props, context) => {
return (
-
+
{message}
{actionButton}
@@ -98,6 +99,10 @@ SnackbarBody.propTypes = {
* The label for the action on the snackbar.
*/
action: PropTypes.node,
+ /**
+ * Override the inline-styles of the content element.
+ */
+ contentStyle: PropTypes.object,
/**
* The message to be displayed.
*