Dynamic style

Control component's style according to the application state, we call it dynamic style. The typical scenario is the activation state of the button. Because JS variables can't be passed to CSS, in the traditional way, we will achieve dynamic styles by controlling CSS classes.

You should have seen code similar to the following:

Result

Live Editor

function App() {
  const [isActive, setIsActive] = useState(false)
  return (
    <button
      className={`btn ${isActive ? 'btn-active' : ''}`}
      onClick={() => {
        setIsActive(!isActive)
      }}
    >
      It is {isActive ? 'on' : 'off'}!
    </button>
  )
}

function App() {
  const [isActive, setIsActive] = useState(false)
  return (
    <button
      className={`btn ${isActive ? 'btn-active' : ''}`}
      onClick={() => {
        setIsActive(!isActive)
      }}
    >
      It is {isActive ? 'on' : 'off'}!
    </button>
  )
}

We control the dynamic style through the two CSS classes .btn and .btn-active. What's the problem? This is to make our components rely heavily on external style codes, lose their independence and cohesion. If there are more style states, the readability of the code will decrease. In addition, the portability of this method is also very poor.

The dynamic style handling by CSS classes is also contrary to React's concept of UI=f(State), because the change of external CSS will cause the UI in UI=f(State) to change.

Can we handle dynamic styles based on inline styles? It does. Code show as below:

Result

Live Editor

function App() {
  const [isActive, setIsActive] = useState(false)
  return (
    <button
      style={{
        padding: '15px',
        color: isActive ? '#fff' : '#000',
        background: isActive ? '#276ef1' : 'none',
        borderRadius: '4px',
        border: '1px solid #aaa',
      }}
      onClick={() => {
        setIsActive(!isActive)
      }}
    >
      It is {isActive ? 'on' : 'off'}!
    </button>
  )
}

function App() {
  const [isActive, setIsActive] = useState(false)
  return (
    <button
      style={{
        padding: '15px',
        color: isActive ? '#fff' : '#000',
        background: isActive ? '#276ef1' : 'none',
        borderRadius: '4px',
        border: '1px solid #aaa',
      }}
      onClick={() => {
        setIsActive(!isActive)
      }}
    >
      It is {isActive ? 'on' : 'off'}!
    </button>
  )
}

This way has some advantages:

Easy to pass JS state variables to CSS
Consistent with the React concept of UI=f(State)
Highly portable

But inline styles also have some very serious limitations. You can't use pseudo-selectors like hover or media queries.In addition, inline styles can easily mess up the structure of components and make the code difficult to read.

How to deal with dynamic styles using Fower? Fower makes dynamic style processing easier by assigning values to Atomic Props, and the code is more concise than inline styles.

Result

Live Editor

function App() {
  const [isActive, setIsActive] = useState(false)
  return (
    <Button
      p-15
      rounded-4
      border
      color={isActive ? '#fff' : '#000'}
      bg={isActive ? '#276ef1' : false}
      onClick={() => setIsActive(!isActive)}
    >
      It is {isActive ? 'on' : 'off'}!
    </Button>
  )
}

function App() {
  const [isActive, setIsActive] = useState(false)
  return (
    <Button
      p-15
      rounded-4
      border
      color={isActive ? '#fff' : '#000'}
      bg={isActive ? '#276ef1' : false}
      onClick={() => setIsActive(!isActive)}
    >
      It is {isActive ? 'on' : 'off'}!
    </Button>
  )
}