Bagaimana untuk melaksanakan pemetaan rawak latar belakang elemen?

Question

Saya ingin menetapkan warna latar belakang setiap elemen secara rawak

Tetapi apabila saya memasukkannya ke dalam kod berikut, warna latar belakang menjadi telus:

{
  modules.map((module, index) => (
    <div className='carousel-module shadow'
      style={{ background: "#" + Math.floor(Math.random()*16777215).toString(16)}}
    >
      <p className='module-element-text'>{module.name ? module.name : "N/A"}</p>
      <p className='module-element-text'>{module.code ? module.code : "N/A"}</p>
      <Button onClick={() => setShow(false)}
          variant="success" className='modules-list-button'>
          Load
      </Button>
    </div>
  ))
}

Alangkah baiknya mendengar cadangan anda tentang cara untuk menjadikannya berkesan.

Answer 1

Ini adalah fungsi yang saya gunakan untuk menghasilkan warna heks. Kaedah anda mungkin memperkenalkan saluran alfa ke dalam warna, menjadikannya telus.

function randomHexColor() {
    let toHex = function (n) {
        let hex = n.toString(16);
        while (hex.length < 2) { hex = '0' + hex; }
        return hex;
    };
    let rr = toHex(Math.floor(Math.random() * 256));
    let gg = toHex(Math.floor(Math.random() * 256));
    let bb = toHex(Math.floor(Math.random() * 256));
    return '#' + rr + gg + bb;
}