diff --git a/packages/rax-document/CHANGELOG.md b/packages/rax-document/CHANGELOG.md
index 16e22ed27..f385d2e80 100644
--- a/packages/rax-document/CHANGELOG.md
+++ b/packages/rax-document/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.1.7
+
+- Feature: support customize styles and scripts
+
 ## v0.1.6
 
 - Chore: bundle script should add `crossorigin="anonymous"` default
diff --git a/packages/rax-document/package.json b/packages/rax-document/package.json
index dcf3e033b..d89bb375a 100644
--- a/packages/rax-document/package.json
+++ b/packages/rax-document/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rax-document",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Provide components for building Document",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",
diff --git a/packages/rax-document/src/index.js b/packages/rax-document/src/index.js
index 072256a55..ed2ead337 100644
--- a/packages/rax-document/src/index.js
+++ b/packages/rax-document/src/index.js
@@ -46,12 +46,22 @@ function Data(props, context) {
 // Named by role rather than implementationm, so component name are `Style` rather than `Styles`.
 function Style(props, context) {
   const { __styles = [] } = context;
+  const consumer = getConsumer(props);
+
+  if (typeof consumer === 'function') {
+    return consumer(__styles);
+  }
 
   return __styles.map((src, index) => <link {...props} rel="stylesheet" href={src} key={`style_${index}`} />);
 }
 
 function Script(props, context) {
   const { __scripts = [] } = context;
+  const consumer = getConsumer(props);
+
+  if (typeof consumer === 'function') {
+    return consumer(__scripts);
+  }
 
   // props such as type can be passed to script tag
   // script default crossorigin value is anonymous
@@ -72,7 +82,7 @@ function App(props, context) {
     return route.path == pagePath;
   });
 
-  const consumer = Array.isArray(props.children) ? props.children[0] : props.children;
+  const consumer = getConsumer(props);
 
   if (typeof consumer === 'function') {
     return consumer(currentPageInfo);
@@ -81,6 +91,10 @@ function App(props, context) {
   return props.children;
 }
 
+function getConsumer(props) {
+  return Array.isArray(props.children) ? props.children[0] : props.children
+}
+
 export {
   Root,
   Data,