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

Signal for style attribute as object #4034

Closed
1 task done
Grafikart opened this issue Jun 1, 2023 · 2 comments
Closed
1 task done

Signal for style attribute as object #4034

Grafikart opened this issue Jun 1, 2023 · 2 comments

Comments

@Grafikart
Copy link

Grafikart commented Jun 1, 2023

  • Check if updating to the latest Preact version resolves the issue

Describe the bug
I'm creating a style object using computed but when it is set on an element, it's not being applied.
If the style is a string signal it works.

To Reproduce
A simple code sandbox : https://codesandbox.io/s/preact-style-issue-5nw6q8?file=/src/index.js

function App() {
  const count = signal(0);
  const increment = () => count.value++;

  // Style is not working with object style
  const style = computed(() => ({
    color: count.value % 2 ? "red" : "blue"
  }));

  // But it works for string
  const styleString = computed(
    () => `color: ${count.value % 2 ? "red" : "blue"}`
  );

  return (
    <div style={{ margin: 20 }}>
      <p style={style}>{count}</p>
      <p style={styleString}>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Expected behavior
I would expect style to be updated when signal is used.

@rschristian
Copy link
Member

rschristian commented Jun 2, 2023

Explanation here, and you can track that issue for changes.

@Grafikart
Copy link
Author

Thanks, closing this issue, sorry I wasn't aware of the other repo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants