以下是使用 React、Typescript、Material UI 和 styled-components 创建应用程序并安装 react-styleguidist 的步骤和示例代码：

步骤 1：创建 React 应用程序

首先，确保已经安装了 Node.js 和 npm。

运行以下命令创建一个新的 React 应用程序：

npx create-react-app my-app --template typescript
cd my-app

步骤 2：安装 Material UI 和 styled-components

运行以下命令来安装 Material UI 和 styled-components：

npm install @mui/material @emotion/react @emotion/styled styled-components

步骤 3：安装 react-styleguidist

运行以下命令来安装 react-styleguidist：

npm install --save-dev react-styleguidist

步骤 4：配置 react-styleguidist

在项目根目录下创建一个名为 .styleguidistrc.js 的文件，并添加以下内容：

module.exports = {
  components: 'src/components/**/[A-Z]*.tsx',
  defaultExample: true,
  styleguideDir: 'dist/styleguide',
  propsParser: require('react-docgen-typescript').withCustomConfig(
    './tsconfig.json',
    {
      propFilter: (prop) => {
        if (prop.parent) {
          return !prop.parent.fileName.includes('node_modules');
        }
        return true;
      },
    },
  ).parse,
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
              },
            },
            {
              loader: 'ts-loader',
            },
          ],
        },
        {
          test: /\.(css|scss)$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
  },
};

步骤 5：创建组件和文档

在 src/components 目录下创建一个名为 Button.tsx 的文件，并添加以下内容：

import React from 'react';
import styled from 'styled-components';
import { Button as MuiButton } from '@mui/material';

const StyledButton = styled(MuiButton)`
  /* 添加自定义样式 */
`;

interface ButtonProps {
  children: React.ReactNode;
}

export const Button: React.FC = ({ children }) => {
  return {children};
};

在 src/components 目录下创建一个名为 Button.styleguide.md 的文件，并添加以下内容：

# Button

按钮组件。

## 示例

```jsx
import { Button } from './Button';

Click me

步骤 6：运行 react-styleguidist

运行以下命令启动 react-styleguidist：

npx styleguidist server

在浏览器中打开 http://localhost:6060/，您将看到生成的组件文档。

希望这个示例对您有所帮助！