Блог

Это мой код, под ним вы найдете вопрос

 import { printIntrospectionSchema } from 'graphql';
import React, { useContext, useState } from 'react';
import styled from 'styled-components';
import { Context } from '../../../Context/Context';
// DATA
function DurationIntervalSelection() {
  const tabsData = [
    {
      text: 'Duration',
    },
    {
      text: 'Interval',
    },
  ];
  // STATE
  const [selectedIndex, setselectedIndex] = useState(0);
  const { selected } = useContext(Context);
  console.log(selected.color, 'selected color');
  // FUNCTION
  const handleIndexSelection = (index) => {
    setselectedIndex(index);
  };
  return (
    <Container>
      <TabsContainer backgroundColor={selected.backgroundColor}>
        <Indicator
          backgroundColor={selected.color}
          style={{
            left: `${selectedIndex * 50}%`,
          }}
        />
        {tabsData.map((tab, index) => {
          return (
            <Tab
              style={{
                color: selectedIndex === index ? 'white' : 'black',
              }}
              onClick={() => handleIndexSelection(index)}
              key={tab.text}
            >
              <p style={{ zIndex: 100 }}>{tab.text}</p>
            </Tab>
          );
        })}
      </TabsContainer>
    </Container>
  );
}
const Container = styled.div`
  margin-top: 10px;
  border: 1px solid #f2f2f7;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px 0;
`;

const Indicator = styled.div`
  width: 50%;
  position: absolute;
  /* z-index: -1; */
  height: 100%;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  background-color: ${(props) => props.backgroundColor};
`;
const TabsContainer = styled.div`
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: relative;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  overflow: hidden;
  background-color: ${(props) => props.backgroundColor};
`;
const Tab = styled.div`
  display: flex;
  width: 50%;
  justify-content: center;
  cursor: pointer;
  align-items: center;
  padding: 10px;
`;
export default DurationIntervalSelection;
 

Как вы можете видеть из приведенного выше кода, я передаю backgroundColor в качестве реквизита, который принимает некоторый цвет из состояния реакции.

 <TabsContainer backgroundColor={selected.backgroundColor}>
 

И в стилизованном компоненте я делаю:

background-color: $ {(props) => props.backgroundColor};

Но мой вопрос в том, поскольку мне нужно следовать дизайну, созданному коллегой, как мне добавить непрозрачность к вышеуказанному цвету фона, не влияя на непрозрачность всего div: TabsContainer . Я имею в виду, если я добавлю в TabsContainer -> непрозрачность: 0.3 — например, непрозрачность повлияет на весь раздел TabsContainer, включая раздел Tab, в то время как я хочу просто изменить непрозрачность самого цвета, чтобы я не влиял ни на одного дочернего элемента. Я надеюсь, что это имеет смысл. Есть ли способ?

Хорошо, если ваше шестнадцатеричное значение получено из вашего серверной части, вы можете либо создать свою собственную функцию javascript, которая преобразует hex в rgba, либо вы можете использовать библиотеку, такую как polished. У них есть функция с именем rgba, которая преобразует шестнадцатеричную строку и добавляет к ней альфа-значение

 import { rgba } from 'polished'

const div = styled.div`
  background: ${(props) => rgba(props.backgroundColor, 0.3)};
`
 

Или вы можете применить его непосредственно к реквизиту

 <TabsContainer backgroundColor={rgba(selected.backgroundColor, 0.3)}>
 

Пример CodeSandbox.

Поскольку данные из серверной части были правильными, но я не смог найти решение, я понял, что мог бы добавить к

 <TabsContainer backgroundColor="rgba(255,255,255, 0.5)">
 

Цвет фона на белых нотах с непрозрачностью, чтобы подчеркнуть цвет за ним более светлым способом