fix for mdx

Author: chenxsan

src/content/branding.mdx

@@ -29,7 +29,7 @@ Double the size of the inner dark blue cube to get an idea how much space the lo
 
 For dark backgrounds, you can use the negative version of the logo:
 
-<div style="display: block; background: #111;">
+<div style={{ display: 'block', background: '#111' }}>
   <img
     src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-dark-bg.png"
     alt="webpack logo default with proper spacing on light background"
@@ -88,19 +88,19 @@ We use the beautiful [Geomanist Medium](http://atipofoundry.com/fonts/geomanist)
 
 The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](https://opencollective.com/) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)!
 
-| Color Name   | HEX Code      | RGB Code             | Sample                                               |
-| ------------ | ------------- | -------------------- | ---------------------------------------------------- |
-| Malibu:      | HEX `#8dd6f9` | `rgb: 141, 214, 249` | <div style="background-color: #8dd6f9;">&nbsp;</div> |
-| Denim:       | HEX `#1d78c1` | `rgb: 29, 120, 193`  | <div style="background-color: #1d78c1;">&nbsp;</div> |
-| Fiord:       | HEX `#465E69` | `rgb: 70, 94, 105`   | <div style="background-color: #465E69;">&nbsp;</div> |
-| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66`    | <div style="background-color: #2B3A42;">&nbsp;</div> |
-| White:       | HEX `#ffffff` | `rgb: 255, 255, 255` | <div style="background-color: #ffffff;">&nbsp;</div> |
-| Concrete:    | HEX `#f2f2f2` | `rgb: 242, 242, 242` | <div style="background-color: #f2f2f2;">&nbsp;</div> |
-| Alto:        | HEX `#dedede` | `rgb: 222, 222, 222` | <div style="background-color: #dedede;">&nbsp;</div> |
-| Dusty Gray:  | HEX `#999999` | `rgb: 153, 153, 153` | <div style="background-color: #999999;">&nbsp;</div> |
-| Dove Gray:   | HEX `#666666` | `rgb: 102, 102, 102` | <div style="background-color: #666666;">&nbsp;</div> |
-| Emperor:     | HEX `#535353` | `rgb: 83, 83, 83`    | <div style="background-color: #535353;">&nbsp;</div> |
-| Mine Shaft:  | HEX `#333333` | `rgb: 51, 51, 51`    | <div style="background-color: #333333;">&nbsp;</div> |
+| Color Name   | HEX Code      | RGB Code             | Sample                                                 |
+| ------------ | ------------- | -------------------- | ------------------------------------------------------ |
+| Malibu:      | HEX `#8dd6f9` | `rgb: 141, 214, 249` | <div style={{backgroundColor: '#8dd6f9'}}>&nbsp;</div> |
+| Denim:       | HEX `#1d78c1` | `rgb: 29, 120, 193`  | <div style={{backgroundColor: '#1d78c1'}}>&nbsp;</div> |
+| Fiord:       | HEX `#465E69` | `rgb: 70, 94, 105`   | <div style={{backgroundColor: '#465E69'}}>&nbsp;</div> |
+| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66`    | <div style={{backgroundColor: '#2B3A42'}}>&nbsp;</div> |
+| White:       | HEX `#ffffff` | `rgb: 255, 255, 255` | <div style={{backgroundColor: '#ffffff'}}>&nbsp;</div> |
+| Concrete:    | HEX `#f2f2f2` | `rgb: 242, 242, 242` | <div style={{backgroundColor: '#f2f2f2'}}>&nbsp;</div> |
+| Alto:        | HEX `#dedede` | `rgb: 222, 222, 222` | <div style={{backgroundColor: '#dedede'}}>&nbsp;</div> |
+| Dusty Gray:  | HEX `#999999` | `rgb: 153, 153, 153` | <div style={{backgroundColor: '#999999'}}>&nbsp;</div> |
+| Dove Gray:   | HEX `#666666` | `rgb: 102, 102, 102` | <div style={{backgroundColor: '#666666'}}>&nbsp;</div> |
+| Emperor:     | HEX `#535353` | `rgb: 83, 83, 83`    | <div style={{backgroundColor: '#535353'}}>&nbsp;</div> |
+| Mine Shaft:  | HEX `#333333` | `rgb: 51, 51, 51`    | <div style={{backgroundColor: '#333333'}}>&nbsp;</div> |
 
 In addition, you can grab the following file types directly from these links: