Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to style child element that depends on parent ? #330

Closed
SanskarSans opened this Issue Dec 22, 2016 · 7 comments

Comments

Projects
None yet
5 participants
@SanskarSans
Copy link

commented Dec 22, 2016

I have my component of table like this

<Table className="table">
  <Thead>
    <Tr>
      <Th>ID</Th>
      <Th>Name</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>1</Td>
      <Td>Material Design</Td>
    </Tr>
  </Tbody>
</Table>

How can i apply such css?

.table > thead > tr > th,
.table > tbody > tr > td,
{
  text-align: left;
  padding: 20px;
  vertical-align: top;
  border-top: 0;
}
@k15a

This comment has been minimized.

Copy link
Member

commented Dec 22, 2016

Look at this issue: #142.
But where do you need this selector in your example?

@mxstbr mxstbr closed this Dec 22, 2016

@SanskarSans

This comment has been minimized.

Copy link
Author

commented Dec 23, 2016

for tbody > tr > td i did following but no changes is seen

export const Tr = styled.tr`
  color: #666;
`;

export const Td = styled.td`
  color: #666;
`;

export const Tbody = styled.tbody`
  color: #666;
  ${Tr.selector} > ${Td.selector} {
    text-align: left;
    padding: 20px;
    vertical-align: top;
    border-top: 0;
  }
`;
@k15a

This comment has been minimized.

Copy link
Member

commented Dec 23, 2016

It's currently not supported. Why do you not use:

export const Tr = styled.tr`
  color: #666;
`;

export const Td = styled.td`
  color: #666;
`;

export const Tbody = styled.tbody`
  color: #666;
  & > td {
    text-align: left;
    padding: 20px;
    vertical-align: top;
    border-top: 0;
  }
`;

Or:

export const Tr = styled.tr`
  color: #666;
`;

export const Td = styled.td`
  color: #666;

  tbody > & {
    text-align: left;
    padding: 20px;
    vertical-align: top;
    border-top: 0;
  }
`;

export const Tbody = styled.tbody`
  color: #666;
`;
@SanskarSans

This comment has been minimized.

Copy link
Author

commented Dec 24, 2016

It did not show any changes in styling

<Table className="table">
  <Thead>
    <Tr>
      <Th>ID</Th>
      <Th>Name</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>1</Td>
      <Td>Material Design</Td>
    </Tr>
  </Tbody>
</Table>
export const Th = styled.th`
  color: #666;
`;

export const Td = styled.td`
  color: #666;
`;

export const Tbody = styled.tbody`
  color: #666;
  & > td {
    text-align: left;
    padding: 20px;
    vertical-align: top;
    border-top: 0;
  }
`;
@SanskarSans

This comment has been minimized.

Copy link
Author

commented Dec 24, 2016

It worked. Thanks for your help.

@MayuriR29

This comment has been minimized.

Copy link

commented Mar 1, 2019

Thanks

@j1pradeep

This comment has been minimized.

Copy link

commented Apr 17, 2019

In case of table it works. But when we target child class not element, that time it's not working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.