如何在ReactJS中将颜色十六进制码从数据库中提取到scss文件中？

import axios from 'axios';

const getColorData = async () => {
  try {
    const response = await axios.get('/api/colors');
    return response.data;
  } catch (error) {
    console.error(error);
    return [];
  }
};

export default getColorData;

import React, { useEffect, useState } from 'react';
import getColorData from './colorService';

const ColorComponent = () => {
  const [colors, setColors] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await getColorData();
      setColors(data);
    };

    fetchData();
  }, []);

  return (
    <div>
      {colors.map((color) => (
        <div key={color.id} style={{ backgroundColor: color.color }}>
          {color.color}
        </div>
      ))}
    </div>
  );
};

export default ColorComponent;

$color-from-database: #ffffff;

.element {
  background-color: $color-from-database;
}