Блог

У меня есть компонент CRYPTOCard из «import {CRYPTOCard} from «react-ui-flex-cards»»

Он помещается в компонент StockCard, который также использует material-ui. И, как я вижу, компонент Material-ui’card каким-то образом переопределяет мой компонент.

При проверке HTML я обнаружил следующее:

 <div class="card crypto-card"> //this is my component
 

Итак, насколько я понимаю, компонент CRYPTOCard также использует класс card в качестве css.

Если при проверке я отключаю background-color: #fafaf" , он показывает компонент CRYPTOCard с правильным фоновым цветом.

Вот мой компонент StockCard

 import Axios from 'axios';
import React,{useState, useEffect} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {CryptoCard} from "react-ui-flex-cards";


function StockCard(props) {
  const [FetchInterval, setFetchInterval] = useState(300000);
  const [StockData, setStockData] = useState({});
  const [TrendDirection, setTrendDirection] = useState(0);
  const [Trend, setTrend] = useState(0);
  const classes = useStyles();

  const FetchData = async () =>{
    const resp = await Axios.get(`http://localhost:8080/stock/getquote/${props.API}`)
      setStockData(resp.data);
  }

  const calculateTrendDirection = () => {
    if(StockData.currentPrice >  StockData.previousClosePrice){
      setTrendDirection(1);
    } else if (StockData.currentPrice <  StockData.previousClosePrice){
      setTrendDirection(-1);
    } else {
      setTrendDirection(0);
    }
  }

  const calculateTrend = () => {
    var result =  100 * Math.abs( ( StockData.previousClosePrice - StockData.currentPrice ) / ( (StockData.previousClosePrice   StockData.currentPrice)/2 ) );

    setTrend(result.toFixed(2));
  }


  useEffect(() => {
    FetchData();
    
    const interval = setInterval(async() => {
      await FetchData();
    }, FetchInterval)

    return() => clearInterval(interval);

  },[FetchInterval]);

  useEffect(()=>{
    if(StockData.stock){
      console.log("Trends calculated", StockData.name);
      calculateTrend();
      calculateTrendDirection();
    }
    
  },[StockData])
  
    return(
        <div>
        <CryptoCard
          currencyName={StockData.stock? StockData.stock.name : "Name"}
          currencyPrice={StockData.stock? `$ ${StockData.currentPrice}` : 0}
          icon={<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/2000px-Bitcoin.svg.png"/>}
          currencyShortName={StockData.stock? StockData.stock.symbol : "Symbol"}
          trend={StockData.stock? `${Trend} %` : 0}
          trendDirection={StockData.stock? TrendDirection : 0} 
          chartData={[9200, 5720, 8100, 6734, 7054, 7832, 6421, 7383, 8697, 8850]}
        />
        </div>
    )
}


export default StockCard;