diff --git a/packages/babel-plugin-transform-jsx-stylesheet/src/__tests__/index.js b/packages/babel-plugin-transform-jsx-stylesheet/src/__tests__/index.js
index 30aefa6b7d..6e4c8a6beb 100644
--- a/packages/babel-plugin-transform-jsx-stylesheet/src/__tests__/index.js
+++ b/packages/babel-plugin-transform-jsx-stylesheet/src/__tests__/index.js
@@ -66,9 +66,12 @@ const getStyleFunctionTemplete = `function _getStyle(classNameExpression) {
   return style;
 }`;
 
-function getTransfromCode(code) {
+function getTransfromCode(code, opts) {
   return transform(code, {
-    plugins: [jSXStylePlugin, syntaxJSX]
+    plugins: [
+      [jSXStylePlugin, opts],
+      syntaxJSX
+    ]
   }).code;
 }
 
@@ -273,6 +276,20 @@ import appStyleSheet from './app.css';
 var _styleSheet = appStyleSheet;
 render(<div style={_styleSheet["header"]} />);`);
   });
+
+  it('dont remove className', () => {
+    expect(getTransfromCode(`
+import { createElement, render } from 'rax';
+import './app.css';
+
+render(<div className="header" />);
+`, { retainClassName: true })).toBe(`
+import { createElement, render } from 'rax';
+import appStyleSheet from './app.css';
+
+var _styleSheet = appStyleSheet;
+render(<div className="header" style={_styleSheet["header"]} />);`);
+  });
 });
 
 describe('test development env', () => {
@@ -299,4 +316,4 @@ render(<div __class="header" style={_styleSheet["header"]} />);`);
   afterEach(() => {
     process.env.NODE_ENV = lastEnv;
   });
-});
\ No newline at end of file
+});
diff --git a/packages/babel-plugin-transform-jsx-stylesheet/src/index.js b/packages/babel-plugin-transform-jsx-stylesheet/src/index.js
index 524d4c78d3..13748ee3d2 100644
--- a/packages/babel-plugin-transform-jsx-stylesheet/src/index.js
+++ b/packages/babel-plugin-transform-jsx-stylesheet/src/index.js
@@ -147,7 +147,9 @@ function ${GET_STYLE_FUNC_NAME}(classNameExpression) {
           }
         }
       },
-      JSXOpeningElement({ container }, { file }) {
+      JSXOpeningElement({ container }, { file, opts }) {
+        const { retainClassName = false } = opts;
+
         const cssFileCount = file.get('cssFileCount') || 0;
         if (cssFileCount < 1) {
           return;
@@ -177,12 +179,15 @@ function ${GET_STYLE_FUNC_NAME}(classNameExpression) {
 
 
         if (hasClassName) {
-          // development env: change className to __class
-          if (process.env.NODE_ENV === 'development' && classNameAttribute.name) {
-            classNameAttribute.name.name = '__class';
-          } else {
-            // Remove origin className
-            attributes.splice(attributes.indexOf(classNameAttribute), 1);
+          // Dont remove className
+          if (!retainClassName) {
+            // development env: change className to __class
+            if (process.env.NODE_ENV === 'development' && classNameAttribute.name) {
+              classNameAttribute.name.name = '__class';
+            } else {
+              // Remove origin className
+              attributes.splice(attributes.indexOf(classNameAttribute), 1);
+            }
           }
 
           if (