标签: react-styleguidist

I upgraded babel 6.x ? 7.x but having issues running Webpack.

It is complaining about missing core-js/modules/*.

My babel.config.js is in the root directory. I converted the previously existing .babelrc to js (.babelrc also produced the same errors). I am guessing it is some collision with all the core, corejs2, runtime stuff.

There are two apps in my src, mine and Styleguidist (in ./node_modules). My app transpiles and works with these same package.json/babel.config, but …

我试图从 Create React App 3 (CRA)、Typescript、Material UI 和 styled-components 设置 react-styleguidist (RSG)。我被这个错误困住了：

./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js
Module not found: Can't resolve 'rsg-components/Wrapper' in '/Users/ofj/code/new-core-web/node_modules/react-styleguidist/lib/client/rsg-components/ReactExample'

我按照文档为 MUI 主题和样式组件设置了一个包装器：https :
//react-styleguidist.js.org/docs/thirdparties.html#styled-components

/styleguidist/MuiThemeWrapper.tsx

./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js
Module not found: Can't resolve 'rsg-components/Wrapper' in '/Users/ofj/code/new-core-web/node_modules/react-styleguidist/lib/client/rsg-components/ReactExample'

我的 styleguidist 配置：

/styleguidist.config.js

const path = require('path');
module.exports = {
    components: "src/components/**/layout.{js,jsx,ts,tsx}",
    propsParser: require('react-docgen-typescript').withCustomConfig(
        './tsconfig.json'
      ).parse,
    serverPort: 6161,
    styleguideComponents: {
      Wrapper: path.join(__dirname, 'styleguidist/MuiThemeWrapper.jsx')
    }
};

我的 tsconfig 遵循标准的 CRA / MUI 建议
https://material-ui.com/guides/typescript/

配置文件

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": …

我正在尝试使用自定义组件创建样式指南。我需要能够在彼此之间插入组件，并且不确定如何在.md文件内部进行插入。我有一个清单和清单项目。我想在列表中显示列表项。在styleguidist显示中出现此错误。这是一些很好的例子，但没有一个例子说明我要完成的工作-https: //github.com/styleguidist/react-styleguidist/tree/master/examples/basic/src/components

语法错误：意外的令牌（3：0）1：从'./ListItem'中导入ListItem 2：3：

List.tsx

    import React, { Component } from 'react'
    import './List.css'

    export interface IListProps {
      /** Type of button to display */
      font: string;
      disabled: boolean;
      mtmClass: string;
      link: boolean;
    }

    class List extends Component<IListProps> {
      render() {
        const { children } = this.props
        return <ul className={'mtm-list'}>{children}</ul>
      }
    }

    export default List

List.md

    ```js
    import ListItem from './ListItem'

    <List>
       <ListItem> 
           Content in a List
       </ListItem>
    </List>

ListItem.tsx

    import React, { Component } from 'react'
    import './List.css'

    export …

我正在 formik 上制作一个表单，并希望它采用全屏宽度。我尝试过 flex: 1，改变弯曲方向，并改变填充。当文本比输入字段宽时，它会扩展以适应输入字段。我不想设置宽度，因为我希望它随着手机屏幕的宽度而变化。这是现在的样子的图片https://i.stack.imgur.com/wuwC9.png

这是我的样式代码：

const styles = StyleSheet.create({
  input: {
    padding: 10,
    fontSize: 18,
    borderRadius: 6,
    flex: 1,
    borderBottomColor: '#000',
    borderBottomWidth: 2,
    alignSelf: 'stretch',
    flexDirection: 'row',
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inner: {
    //padding: 20,
    flex: 1,
    // justifyContent: 'flex-end',
  },
});

输入字段如下所示：

 <View style={styles.container}>
      <Formik
        initialValues={{
          first_name: '',
          last_name: '',
          address_1: '',
          address_2: '',
          city: '',
          state: '',
          postcode: '',
          country: 'CA',
          email: 'john.doe@example.com',
          phone: '647-274-8068',
        }}
        // Form …

我在 React 应用程序中使用 styleguidist，这是我的 styleguid.config.js 文件的代码：

module.exports = {\n  webpackConfig: {\n    module: {\n      rules: [\n        // Babel loader, will use your project\xe2\x80\x99s .babelrc\n        {\n          test: /\\.jsx?$/,\n          exclude: /node_modules/,\n          loader: \'babel-loader\'\n        },\n        // Other loaders that are needed for your components\n        {\n          test: /\\.css$/,\n          loader: \'style-loader!css-loader?modules\'\n        }\n      ]\n    }\n  }\n}\n

现在我想在运行于http://localhost:6060 的styleguidist 服务器中显示条形码图像。\n我的 styleguidist readme.md 的代码

```jsx\nvar Macybarcode = require(\'../../../containers/assets/img/macy/barcode.png\');\nconst barcode_img = Macybarcode;\nconst barcode_no = "33527111690008";\n\n<BarcodeMacy1 imgString={barcode_img} lineString={barcode_no} paddingTop="20px" width="50%" height="40px" />   \n```\n

但每当我尝试显示图像时，我的服务器都会出现以下错误：

所以我的设置很简单

样式指南.config.js

module.exports = {
    components: 'src/components/**/*.js',
    require: [
        path.join(__dirname, 'node_modules/bootstrap/scss/bootstrap.scss')
    ]
};

每当我运行 npm run styleguide 时，我都会收到此错误：

模块解析失败：意外字符@您可能需要合适的加载程序来处理此文件类型。

bootstrap.scss看起来像这样：

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/mixins";
...
...

我知道我需要添加 SASS-loader，但我发现的示例使用不同的上下文，所以我还不能真正弄清楚它们。

ps 当我运行应用程序本身时，SASS 在 React Styleguide 之外工作，而不是 styleguide。

max-width'main' 元素的默认值是1000px，我想让它更宽。我尝试了自定义样式指令，但无法通过“styleguide.config.js”中的以下配置找到“main”元素或“rsg--content-xx”类

styles: {
  StyleGuide: {
    'rsg--content': {
      maxWidth: 1300,
      width: 1300
    },
    '@global main': {
      maxWidth: 1300,
      width: 1300
    }
  }
}

任何帮助将不胜感激。

我正在尝试使用react-styleguidist库创建项目文档。但是，我有一个问题。好吧，在项目中我确实将单位 rem 重置为使用 10px 的倍数，而不是 16px。

一切都很好，但我是在应用程序样式的根源上做到的。Stylegudist 没有看到它。如何将这样的行添加到文档库中？

html {font-size: 62.5%; / * Now 10px = 1rem! * /}

或者换个方式。我不想将 rem 重置到我的每个组件样式。

干杯，丹尼尔