Блог

Главная - Вопросы по программированию - css сетка альтернативный цвет строки и поместить поле-тень

css сетка альтернативный цвет строки и поместить поле-тень

#css #reactjs #css-grid #styled-components

#css #reactjs #css-сетка #styled-компоненты

Вопрос:

Я использую сетку для создания таблицы цен с большим количеством информации, но мне нужно изменить цвета фона некоторых строк и применить тень окна. Я использую react со стилизованными компонентами.

Как я могу изменить только некоторые строки моей таблицы? Когда я помещаю background-color в мой XML, меняется только фон «lorem ipsun», но не вся строка. Что мне нужно сделать?

OBS: этот textHTML — это личный компонент, который я использую для создания стиля. Создайте это с помощью компонентов стиля ( width: $ {p => p.width }; )

Теперь моя таблица сетки: моя таблица

Что я хочу сделать:

моя будущая таблица

Мой CSS

 export const Grid = styled.div`
  display: grid;
  justify-items: center;

  grid-template-columns: 400px 180px 180px 180px;
  grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
  grid-row-gap: 14px;

  grid-template-areas:
    'VZ SN SN SN'
    'IL PP PP PP'
    'IL II II II'
    'IL IC IC IC'
    'IL IC IC IC'
    'IL IX IC IC'
    'IL IX IC IC'
    'IL IX IC IC'
    'IL IX IC IC'
    'IL IX IC IC'
    'IL IX IC IC'
    'IL IX IC IC'
    'IL IX IC IC'
    'IL IX IX IC'
    'IL IX IX IC'
    'IL IX IX IC'
    'IL IX IX IC'
    'IL IX IX IC';

    height: 80vh;


`;

Мой REACT-XML

 <Grid>
      
        <TextHTML font="700 18px Roboto" color="white">1</TextHTML>
        <TextHTML font="700 18px Roboto" color="var(--green)" margin="0 0 20px 0">lorem ipsum</TextHTML>
        <TextHTML font="700 18px Roboto" color="var(--green)" margin="0 0 20px 0">lorem ipsum</TextHTML>
        <TextHTML font="700 18px Roboto" color="var(--green)" margin="0 0 20px 0">lorem ipsum</TextHTML>

        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;" >lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto" color="var(--black)">R$ 0,00</TextHTML>
        <TextHTML font="700 12px Roboto" color="var(--black)">R$ 39,00</TextHTML>
        <TextHTML font="700 12px Roboto" color="var(--black)">R$ 89,00</TextHTML>

        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto" color="var(--black)">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto" color="var(--black)">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto" color="var(--black)">lorem ipsum</TextHTML>

        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto" > <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        
        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum (Outbound)</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>

        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum (Inbound)</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>

        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>

        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>  
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>

        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        
        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>

        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        
        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        
        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        
        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        
        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        
        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        
        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>
        
        <TextHTML font="400 12px Roboto" color="var(--black)" custom="justify-self: left;">lorem ipsum</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <TextHTML font="700 12px Roboto">X</TextHTML>
        <IconStyleHTML color="var(--green)" width="10px" height="auto"> <Check /> </IconStyleHTML>

 
    
 
</Grid>

Комментарии:

1. выглядит как настоящая таблица, почему бы не использовать настоящую HTML-таблицу? с сеткой вам нужно будет нарисовать средний повторяющийся градиент или выбрать другой цвет bg для дочерних элементов (ячеек) из шаблона, созданного с помощью селектора : nth-child(8n x) .

2. в ожидании обратной связи о выборе сетки, вот возможность через nth-child и bg jsfiddle.net/zkj8agy7

3. Ну, чтобы быть честным с вами, я никогда не использовал этот метод для создания таблицы. Я знаю, это выглядит странно. Однако мне редко приходилось создавать таблицу. Может быть, я могу попробовать, но я действительно ценю этот n-й дочерний элемент. Выглядит очень просто и красиво. Какая ваша вещь лучше? Переделать таблицу или просто адаптировать с помощью n-го дочернего элемента?

4. Хорошо, я пытаюсь использовать этот пример в своем проекте, но не сработал. Но я все еще пытаюсь

5. jsfiddle.net/kyfdcx1o/54 Я просто меняю цвета