小编And*_*ian的帖子

我在提供构建的故事书时遇到了问题。正如你在下面看到的，它只显示了一个旋转器旋转到遗忘状态。当我打开控制台时，它显示： Error: manager received sharedStateChanged-manager-storybook/viewport but was unable to determine the source of the event

这是我的故事书配置文件：

main.js

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ],
  webpackFinal: config => {
    return {
      ...config,
      plugins: config.plugins.filter(plugin => {
        if (plugin.constructor.name === 'ESLintWebpackPlugin') {
          return false
        }
        return true
      }),
    }
  }
}

preview.js

import '../src/recore/.storybook/preview.css'
import * as Recore from '../src/recore'

Recore.init({
  defaults: {
    IMAGE_RESOLVER: path => {
      return import('../src/assets/' + path)
    }
  }
})

export …

我今天遇到了一个问题.我想确保我的应用程序看起来很好,这需要我做很多调整,特别是在margin/padding部分.

我的问题是:哪种方法更好？创建多个样式表(在父组件上)只是为了适应这些小变化(我使用可重复使用的组件和无边距样式表,这些边距将从父组件继承)或者只是让它在组件上内联？

我知道创建样式表可能是更好的方法.但是为了适应那些继承的样式,我将使用 style={[myComponentStyle, passedDownParentStyle]}< - 它不会创建一个新的样式表,然后首先取消使用Stylesheet.create的目的吗？

任何有这方面的专家都能给我一些见解吗？

编辑 示例:

const Style = Stylesheet.create({
 child: {
  color: 'red'
 },
 parent1: {
  padding: 5,
  margin: 10
 },
 parent2: {
  padding: 10,
  margin: 5
 }
})

class Child {
 render() {
  return (
   <Text style={[Style.child, this.props.style]}>
    {this.props.children}
   </Text>
  )
 }
}

class Parent1 {
 render() {
  return (
   <Child style={Style.parent1}>
    Hello
   </Child>
  )
 }
}

class Parent2 {
 render() {
  return (
   <Child style={Style.parent2}>
    World
   </Child>
  )
 }
}

更新 我的问题是:是不是使用了 …