CODEWITHSUNDEEP
cssreactjs
nCardot
nCardot

Reputation: 6587

Add CSS for html selector based on React state?

I'd like to set overflow-y: hidden for the html selector (not an element) based on whether a React class component state variable is true. Is that possible?

Upvotes: 2

Views: 759

Answers (4)

crokadilekyle
crokadilekyle

Reputation: 100

If you mean you want to apply the overflow-y to the actual HTML tag then putting this code in the render worked for me

...
render() {
  let html = document.querySelector('html');
  this.state.test === "test" ? html.style.overflowY = "hidden" : html.style.overflowY = "visible";
  return (
   ....
  )
};

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 191966

You can use the style property to set inline CSS:

<div style={{ overflowY: hide ? 'hidden' : 'auto' }}>

Upvotes: 0

Yaman KATBY
Yaman KATBY

Reputation: 2013

Yes, It's possible. You can do this.

function App() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const htmlSelector = document.querySelector("html");
    htmlSelector.style.overflowY = visible ? "unset" : "hidden";
  }, [visible]);

  return (
    <button onClick={() => setVisible(prevState => !prevState)}>
      Toggle overflow
    </button>
  );
}

See the full example on CodeSandbox

Upvotes: 0

xyhhx
xyhhx

Reputation: 6664

You can do 

function MyComponent() {
    // Set your state somehow
    const [something, setSomething] = useState(initialState)
    // Use it in your className`
    return <div className={!!something && 'class-name'} />
}

If you have multiple class names to work with, a popular package is (aptly named) classnames. You might use it like so:

import cx from 'classnames'


function MyComponent() {
    const [something, setSomething] = useState(initialState)

    return <div className={cx({
        'some-class' : something // if this is truthy, 'some-class' gets applie
    })} />
}

Upvotes: 0

Related Questions