如何在反应中为可重用组件应用不同的背景颜色和不同的边框颜色？

Question

我正在开发 react 项目，在该项目中，我有一个父组件，它是 App.js，而 Child.js 是一个子组件。

现在在 App.js 中，我调用了两次 Child.js。现在我已经为 Child.js 编写了一些 CSS，所以在输出中会出现两个圆圈。

现在我正在尝试为两个圆圈实现不同的背景颜色和不同的边框颜色

这是我的代码

这是 App.js

import React from 'react';
import './App.css';
import Child from './Child/Child';



function App() {
  return(
    <div className="App">
      <Child/>
      <Child/>
    </div>
  );
}

export default App;

这在 App.css 中什么都不是

这是 Child.js

import React from 'react';
import './Child.css';


function Child({ customstyle }) {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className="exp">
                    </div>
                </div>
            </div>
        </div >
    )
}

export default Child

这是 Child.css

.exp {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 1px solid black;
}

如果我不清楚我的疑问，请发表评论

Answer 1

创建两种不同的样式。

.exp {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 1px solid black;
}
.exp2 {
    height: 200px;
    width: 200px;
    border-radius: 20%;
    border: 1px solid blue;
}

将类名作为道具传递给子组件，并在子组件中使用它以实现不同的样式。如下：

import React from 'react';
import './Child.css';
import classnames from 'classnames';

function Child({ customstyle }) {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className={classnames(customstyle)}>
                    </div>
                </div>
            </div>
        </div >
    )
}

export default Child