#reactjs #styled-components
#reactjs #styled-components
Вопрос:
Это мой код, под ним вы найдете вопрос
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, в то время как я хочу просто изменить непрозрачность самого цвета, чтобы я не влиял ни на одного дочернего элемента. Я надеюсь, что это имеет смысл. Есть ли способ?
Ответ №1:
Хорошо, если ваше шестнадцатеричное значение получено из вашего серверной части, вы можете либо создать свою собственную функцию 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)}>
Комментарии:
1. Проблема в том, что данные из серверной части поступают в шестнадцатеричном формате rgb, например: #00000. Поэтому, когда я делаю background-color: $ {(props) => props.backgroundColor}; я не знаю, как добавить непрозрачность непосредственно к цвету фона. вот в чем вопрос:) — я попытался добавить в TabsContainer (стилизованный компонент div) непрозрачность, но поскольку это родительский DIV, он также повлияет на дочерний DIV, а я этого не хочу. Я хочу иметь непрозрачность для самого цвета, который является фоном родительского DIV, а не фоном дочерних элементов. Имеет ли это больше смысла?
2. @user14749773 обновил ответ
3. Большое спасибо, я попробовал ваше решение, и если я добавлю цвет вручную (без использования реквизита из серверной части), это сработает, но как только я добавлю — <TabsContainer backgroundColor={rgba(selected.backgroundColor, 0.3)}> ничего не работает, даже если с помощью консоли. ведение журнала выбрано.Цвет фона я все равно получаю шестнадцатеричное значение. Это кажется таким странным
4. при регистрации в консоли как выглядит шестнадцатеричное значение? Вы уверены, что это допустимое шестнадцатеричное значение, которое возвращается из вашего серверной части?
Ответ №2:
Поскольку данные из серверной части были правильными, но я не смог найти решение, я понял, что мог бы добавить к
<TabsContainer backgroundColor="rgba(255,255,255, 0.5)">
Цвет фона на белых нотах с непрозрачностью, чтобы подчеркнуть цвет за ним более светлым способом