Css 如何在另一个元素的焦点上使用sass更改背景图像

有一个类

inputBlog

，它有一个背景图像。我需要在输入元素上更改此背景图像的焦点

但是在SASS中找不到该怎么做

JSX:

---

根据当前JSX的方式，当您关注输入时，不能使用CSS或sass来更改inputBlog。您唯一可以使用的是JavaScript。这样做，我添加了onFocus和onBlur，它们基本上分别检查何时聚焦到输入组件和何时聚焦出输入组件。图像路径表示要在CSS/sass中使用的图像。因为您只发布了JSX的一部分，所以我只调用这个组件，所以使用您实际拥有的组件

import React from 'react';
import Image1 from 'image path';
import Image2 from 'image path';

const Component= () => {
    const [focused, setFocused] = React.useState(false)
const onFocus = () => setFocused(true)
const onBlur = () => setFocused(false)
  React.useEffect(() => {
    const inputBlog = document.querySelector('.inputBlog')
    if(focused){
      inputBlog.style.background = `url(${Image1})` 
   }else{
    inputBlog.style.background = `url(${Image2})` 
}


  }, [focused]);

 return (
        <div className='inputBlog' >
              some text
             </div>
         </div>
           <div className='inputSection'>
                 <input
                    type="text"
                    onFocus={onFocus} 
                    onBlur={onBlur}
    );

}

从“React”导入React；
从“图像路径”导入图像1；
从“图像路径”导入图像2；
常量组件=（）=>{
const[focused，setFocused]=React.useState（false）
const onFocus=（）=>setFocused（true）
const onBlur=（）=>setFocused（false）
React.useffect（（）=>{
const inputBlog=document.querySelector（'.inputBlog'）
如果（聚焦）{
inputBlog.style.background=`url（${Image1}）`
}否则{
inputBlog.style.background=`url（${Image2}）`
}
}，[重点]；
返回(
一些文本
你能更好地组织你的问题吗？你说你想更改输入的父项的背景，但唯一的背景样式是inputBlog，它不是输入的父项input@UdenduAbasili嗨，现在好点了吗？
background:url（'diffirent image'）；
.inputBlog {
  background: url('image.png')
}
   
.inputSection {
  input {
    border-left: 0;
    
    &:focus {
      .inputBlog {
         background: url('differentimage.png');
      }
    }
  }
}

import React from 'react';
import Image1 from 'image path';
import Image2 from 'image path';

const Component= () => {
    const [focused, setFocused] = React.useState(false)
const onFocus = () => setFocused(true)
const onBlur = () => setFocused(false)
  React.useEffect(() => {
    const inputBlog = document.querySelector('.inputBlog')
    if(focused){
      inputBlog.style.background = `url(${Image1})` 
   }else{
    inputBlog.style.background = `url(${Image2})` 
}


  }, [focused]);

 return (
        <div className='inputBlog' >
              some text
             </div>
         </div>
           <div className='inputSection'>
                 <input
                    type="text"
                    onFocus={onFocus} 
                    onBlur={onBlur}
    );

}