从父组件(props)和组件本身设置样式

从父组件(props)和组件本身设置样式是指在React中，可以通过父组件传递props给子组件，然后在子组件中根据这些props来设置样式。

在React中，可以使用内联样式或者CSS模块来设置组件的样式。

内联样式：内联样式是将样式直接写在组件的JSX代码中，使用JavaScript对象来表示样式。可以通过父组件传递props给子组件，然后在子组件中根据这些props来设置样式。

例如，父组件传递一个名为"color"的props给子组件，子组件可以通过props.color来获取这个值，并将其作为内联样式的一部分。

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const color = 'red';

  return (
    <div>
      <ChildComponent color={color} />
    </div>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = (props) => {
  const style = {
    color: props.color,
  };

  return (
    <div style={style}>
      This is a child component with color {props.color}.
    </div>
  );
};

export default ChildComponent;

CSS模块： CSS模块是一种将CSS样式与组件进行关联的方式。通过使用CSS模块，可以在组件中引入CSS文件，并将样式应用于组件。

首先，在组件所在的目录中创建一个CSS文件，例如ChildComponent.module.css：

/* ChildComponent.module.css */
.child {
  color: red;
}

然后，在子组件中引入CSS模块，并将样式应用于组件。

// 子组件
import React from 'react';
import styles from './ChildComponent.module.css';

const ChildComponent = () => {
  return (
    <div className={styles.child}>
      This is a child component with red color.
    </div>
  );
};

export default ChildComponent;

通过这种方式，可以在父组件中传递props给子组件，然后在子组件中根据这些props来设置样式。

关于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档或者官方网站获取更详细的信息。