Styling of separate pages not taking

🙋Get Help
1

I’m trying to style the pages that comes from WP but nothing “takes”. I’ve tried different solutions that I found on this forum but no luck.

The page is called Böcker, and I added this line of code into the Switch in index.js
<Bocker when={data.isPage && state.router.link == "/bocker/"} />

And my Bocker component looks like this

const Bocker = ({ state, actions, libraries }) => {

  const data = state.source.get(state.router.link)
  const page = state.source[data.id];

  // Get the html2react component.
  const Html2React = libraries.html2react.Component;

  return (
    <Container>
      <Title dangerouslySetInnerHTML={{ __html: page.title.rendered }} />
   

       ...
      <Content>
        <Html2React html={page.content.rendered} />
      </Content>
    </Container>
  )
}

export default connect(Bocker);
const Container = styled.div`

background-color: pink;
const Title = styled.h1
color: blue;
size: 2rem;
`

I also tried to skip the component all together and instead put this in the switch
{state.router.link === "/bocker/" && <Global styles={bockerStyles} />}
and have a separate bockerStyles to target styling of the page but that didn’t work either.
Please help

2

Hi @nattpojkenochdagflic

Welcome to the Frontity community. It’s great to hear that you’re trying out Frontity.

I think you might have an error on the third line in your code snippet. I think you’re missing the data type, so you might need to change it to:

const page = state.source.page[data.id];

or:

const page = state.source[data.type][data.id];

Hope this helps. Let us know.

3

Thank you but sadly no, that doesn’t solve it. I’ve changed to that too.

4

Hi @nattpojkenochdagflic

Can you provide a link to a repo so that we can take a look at your code and/or clone your project to see what’s going on.