代码之家 › 专栏 › 技术社区 › Slim

如何将样式从父组件发送到子组件?

material-ui reactjs

Slim · 技术社区 · 7 年前

我想将样式对象从父组件发送到子组件。父母亲js:

const styles = theme => ({

  field: {
    flexGrow: 1,
    position: 'relative',
    zIndex: 1,
  },
});

class Parent extends React.Component {
 render(){
  const {classes } = this.props
  return (
   <div>
    <Child className={classes.field} />
   </div>
  )
}
}

小孩js:

const styles = theme => ({

  container: {
    flexGrow: 1,
    position: 'relative',
    zIndex: 2,
  },
});

class Child extends React.Component {
 render(){
  const {classes} = this.props
  return (
   <div>
    <Child className={classes.field} />
   </div>
  )
}
}

这将返回子组件的对象类不包含父组件中包含的样式字段。有没有什么建议可以让父母把款式传给孩子?

3 回复 | 直到 7 年前

Acauã Pitta 7 年前

你创造了 const.styles 但你在打电话 {classes.field}

尝试改变 styles 到 classes 或者:

const { styles } = this.props

通过道具发送给孩子:

 <Child className={styles.field} />

然后

class Child extends React.Component {
 render(){
  const {styles} = this.props
  return (
   <div>
    <Child className={styles.field} />
   </div>
  )
}

和 className 我想买房产不是最好的选择

Harkirat Saluja 7 年前

你可以试试这样:-

// Parent component 
class Parent extends React.Component {
 render(){
  return (
   <View>
    <Child customStyle={styles.childStyle} />
   </View>
  )
}
}

const styles = StyleSheet.create({
 childStyle: {
   color: "red"
 }
});

// Child component

class Child extends React.Component {
  render () {
    return (    
    <View>
        <Text style={[this.props.customStyle, styles.text]}></Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  text: {
    fontSize: 14
  }
});

推荐文章

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

10 月前

mettamyron · 具有多用途的材质UI滑块单击时状态重复

1 年前

MatterOfFact · React:Formik形式的物料UI单选按钮组重置不起作用

1 年前

assembler · MUI 5自动完成将禁用的项目样式更改为不使用不透明

1 年前

Terje Nygård · 反应18和材料UI(@mui)。样式不会附加到主题中

1 年前

Alexander Farber · 如何在MUI X DataGrid列中显示img?

1 年前

ian · 使用“responsiveFontSizes”与“experiental_extendTheme”和“experimental_CssVarsProvider”反应MUI`

1 年前

beuluis · MaterialUI样式在带Vite的Shadow DOM中安装不正确的问题

1 年前

ismail.khn · 如何更改MUI日期选择器的“选择日期”标签?

1 年前

Donko · 单击时如何从MUI自动完成、文本字段中删除占位符文本?[副本]

1 年前