今天我要介紹的是朗文CSS MDX。這是一個很好用的工具，可以用來快速創建漂亮的CSS樣式表。

const example = () =>{
return (Hello WorldLorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec commodo mauris quis lobortis malesuada.);
};

使用朗文CSS MDX，我們可以輕松地使用主題和全局樣式。在上面的代碼中，我們定義了一個“example”函數，該函數返回一個Box，包含標題和文本。我們還可以輕松調整標題和文本的字體大小和其他樣式。

const theme = {
colors: {
primary: "blue",
secondary: "green",
},
fonts: {
body: "Roboto, sans-serif",
heading: "Montserrat, sans-serif",
},
fontSizes: [12, 16, 20, 24, 32, 48, 64],
};
const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: ${(props) =>props.theme.fonts.body};
}
`;
const Heading = styled.h1`
font-family: ${(props) =>props.theme.fonts.heading};
font-size: ${(props) =>props.theme.fontSizes[5]}px;
color: ${(props) =>props.theme.colors.primary};
`;
const Text = styled.p`
font-size: ${(props) =>props.theme.fontSizes[3]}px;
color: ${(props) =>props.theme.colors.secondary};
line-height: 1.5;
`;

我們還定義了主題對象，其中包含顏色和字體的特定值。我們還定義了全局樣式，將所有元素的框模型設置為border-box，并將默認的字體設置為正文字體。最后，我們定義了標題和文本的樣式。 總的來說，朗文CSS MDX是一個非常實用的工具，可以幫助我們快速創建漂亮的CSS樣式表。只需使用JavaScript，而無需編寫繁瑣的CSS代碼。