feat(plugin-docs): Improved <Message /> component styles
MODIFY
packages/plugin-docs/client/theme-doc/components/Message.tsx
packages/plugin-docs/client/theme-doc/components/Message.tsx
@@ -31,17 +31,24 @@ function Message(props: PropsWithChildren<MessageProps>) {
break;
}
+ const messageText =
+ typeof props.children === 'string'
+ ? props.children
+ : (props.children as React.ReactElement).props.children;
+
return (
<>
<div
- className={`w-full py-3 px-4 ${bgColor} ${textColor} rounded-lg my-2`}
+ className={`w-full py-3 px-4 ${bgColor} ${textColor} rounded-lg my-4 mdx-message`}
>
+ <p>
{props.emoji && (
- <span role="img" className="mr-3">
+ <span role="img" className="mr-3 inline">
{props.emoji}
</span>
)}
- {props.children}
+ {messageText}
+ </p>
</div>
</>
);

MODIFY
packages/plugin-docs/client/theme-doc/tailwind.css
packages/plugin-docs/client/theme-doc/tailwind.css
@@ -28,7 +28,7 @@ article h6 {
}
article p {
- @apply text-base font-light leading-8 mt-4 text-gray-700 dark:text-white;
+ @apply text-base leading-8 mt-4 text-gray-700 dark:text-white;
}
article ul {
@@ -146,4 +146,8 @@ h1, h2, h3, h4, h5, h6 {
.features::-webkit-scrollbar {
display: none;
}
+
+ .mdx-message > p {
+ @apply mt-0;
+ }
}

feat(plugin-docs): Improved <Message /> component styles (#388)