如果存在styleName，则签入react组件

在React中，styleName通常用于CSS-in-JS库（如styled-components或emotion）或CSS模块中，而不是直接在组件上使用。如果你想要根据某个条件（例如styleName是否存在）来决定是否应用某个样式，你可以使用条件渲染来实现。

基础概念

CSS-in-JS: 这是一种模式，其中CSS被编写为JavaScript代码的一部分，通常用于组件内部。
CSS模块: 这是一种CSS文件，其中所有类名和动画名称默认都是局部作用域的。
条件渲染: 在React中，你可以根据某些条件来决定是否渲染某个组件或元素。

应用场景

假设你有一个按钮组件，你想要根据传入的styleName属性来决定是否应用某个特定的样式。

示例代码

使用CSS模块

首先，创建一个CSS模块文件（例如Button.module.css）:

/* Button.module.css */
.button {
  padding: 10px 20px;
  border: none;
  background-color: blue;
  color: white;
}

.specialButton {
  background-color: red;
}

然后，在你的React组件中使用这个CSS模块:

import React from 'react';
import styles from './Button.module.css';

const Button = ({ styleName, children }) => {
  return (
    <button className={`${styles.button} ${styleName ? styles.specialButton : ''}`}>
      {children}
    </button>
  );
};

export default Button;

使用styled-components

首先，安装styled-components库:

npm install styled-components

然后，创建你的按钮组件:

import React from 'react';
import styled from 'styled-components';

const BaseButton = styled.button`
  padding: 10px 20px;
  border: none;
  background-color: blue;
  color: white;
`;

const SpecialButton = styled(BaseButton)`
  background-color: red;
`;

const Button = ({ styleName, children }) => {
  return (
    <>{styleName ? <SpecialButton>{children}</SpecialButton> : <BaseButton>{children}</BaseButton>}</>
  );
};

export default Button;