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

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;
}

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

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

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

How to apply different background colour and different border colour for reusable components in react?

reactjs