VH
И стайледов
Size: a a a
2021 April 03
A
Vitalii Hrozynskii
Можешь полностью код показать, вывода таблицы
IV
у меня тут вопрос возник) не могу придумать как решить(
если у меня есть scss миксина, например с:
$bg-color-white: #FFFFFF;
$bg-color-grey: #F5F7FA;
$bg-color-black: #000000;
и там цветов с пару деятков.
как по простому сделать из них css ? типо:
}
если у меня есть scss миксина, например с:
$bg-color-white: #FFFFFF;
$bg-color-grey: #F5F7FA;
$bg-color-black: #000000;
и там цветов с пару деятков.
как по простому сделать из них css ? типо:
:root {
--bg-color-white: #FFFFFF;
--bg-color-grey: #F5F7FA;
--bg-color-black: #000000;}
VH
Че-то у тебя не то вообще, у тебя они все вправо выровняны, хотя судя по коду, нету ниодного стиля который бы равнял вправо первую колонку
VH
можешь показать, какие оно класы присвоило блокам?
A
Vitalii Hrozynskii
можешь показать, какие оно класы присвоило блокам?
второй класс - это CustomTableCell
A
Vitalii Hrozynskii
можешь показать, какие оно класы присвоило блокам?
A
но тут вообще нет text-align
VH
Все покажи, а не только эти 2
VH
Ну точнее хотя бы один, которые в цикле
VH
Скинь текстом, я в фидл вставлю
VH
Переписывать влом
a
у меня вопрос, почему на второй пример ругается (
и чем вообще это отличается от 3 примера и почему не просит проверить там а также чем
Possible iteration over unexpected (custom / inherited) members, probably missing hasOwnProperty check), ели я не проверю есть ли такое свойство, как я сделал в первом (также слышал и раньше что так не желательно делать), даже придумать не могу как его может не быть если я перечисляю свойства этого-же объектаи чем вообще это отличается от 3 примера и почему не просит проверить там а также чем
obj[prop] отличается от obj.prop в целом?
a
не могу найти на mdn об этом
A
const RenderAppList = ({ list }) => {
return (
<CustomTable
margin="1rem 0 0 0"
cellWidth="300px"
cellPadding="10px 20px"
aria-label="My Applications"
>
<thead>
<tr>
<CustomTableCell align="right" scope="col">
Name
</CustomTableCell>
<CustomTableCell scope="col">URL/Domain</CustomTableCell>
</tr>
</thead>
<tbody>
{list.map((elem) => {
const { id, name, homeUrl } = elem;
return (
<tr key={id}>
<CustomTableCell align="left">
<StyledLink to={`applications/${id}`}>{name}</StyledLink>
</CustomTableCell>
<td>
<StyledLink to={`applications/${id}`}>{homeUrl}</StyledLink>
</td>
</tr>
);
})}
</tbody>
</CustomTable>
);
};A
export const CustomTable = styled.table`
margin: ${(props) => props.margin || 'none'};
border-spacing: 0px 0px;
border-collapse: collapse;
width: 100%;
thead tr {
border-bottom: 3px solid rgba(240, 240, 240, 0.5);
}
tbody tr:hover {
background-color: rgba(240, 240, 240, 0.5);
}
th,
td {
width: ${(props) => props.cellWidth || '300px'};
padding: ${(props) => props.cellPadding || 0};
}
th {
font-size: 1.125rem;
}
td {
font-size: 1rem;
}
`;
export const CustomTableCell = styled.td`
${CustomTable} & {
text-align: ${(props) => props.align || 'center'};
}
padding: ${(props) => props.padding || 0};
`;
A
Вот, что получается, это у елемента, что в цикле
a
загрузи код в чото нормальное