Блог

Я разрабатываю платформу без кода, на которой вы можете перетаскивать HTML-элементы.

требуется 2 вещи:

• пользователь может ВЫБРАТЬ каждый элемент
• пользователь может стилизовать каждый элемент через правую панель (ширина, длина, размер шрифта, …)

Для того, чтобы 1) Я использовал это решение:

Selector.js

 export default Selector = ({children}) => {
    const [isHovered, setIsHovered] = useState(false);

    const mouseOverHandler = (ev) => {
        ev.stopPropagation();
        setIsHovered(true);
    }

    const mouseOutHandler = (ev) => {
        ev.stopPropagation();
        setIsHovered(false);
    }

    return (
        <div className="container" onMouseOver={mouseOverHandler} onMouseOut={mouseOutHandler}>
            {children}
            { isHovered amp;amp; <div className="overlay"></div> }
        </div>
    );
}
 

Selector.css

 .container {
    position: relative;               // For .overlay to be absolute
    max-width: fit-content;           // To fit children/content size
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(122, 122, 122, 0.2);
}
 

App.js

 export default App = () => [
    return (
         <div className="workspace">
             <Selector><Input style={{width: "100%"}} /></Selector>
             <Selector><Block style={{width: "100px"}} /></Selector>
             <Selector><Block style={{width: "100%"}} /></Selector>
         </div>
    );
}
 

ПРОБЛЕМА заключается в том, когда я пытаюсь установить width:100% Block , например, на компонент. Я хочу Block растянуть его на всю ширину .workspace , но поскольку Block Selector он включен, он будет иметь .container родительский элемент, поэтому он будет заполнять только этот элемент, а не .workspace . При этом я не могу выполнить требование 2).

Вы можете проверить это здесь, на скрипке: https://jsfiddle.net/49cmok2a/2 /. Если вы установите ширину блока в 100 пикселей, это будет блок шириной 100 пикселей, но если вы добавите 100% ширины, он просто уменьшится до 1 пикселя.

Знаете ли вы, как создать Selector , чтобы он не создавал родительский div для элементов. Спасибо!

Ваша проблема в том, что вы пытаетесь перезаписать относительный стиль в дочернем элементе. Вы можете легко управлять шириной стиля вашего селектора всего за 2 действия:

Прежде всего, вы должны изменить свой параметр max-width: object-fit, это свойство используется в основном для тегов img или video. Измените его свойство, как я сделал

 .container{
position: relative;
max-width: 100%;
cursor: pointer;
}
 

В следующий раз вы можете легко изменить ширину селектора.

Надеюсь, я правильно понял ваш вопрос, хорошего дня!

Если вам нужен только квадрат, вы можете использовать 100vw вместо 100% :

 const App = () => {
    return (
         <div className="workspace">
              <Selector><Input style={{width: "100%"}} /></Selector>
              <Selector><Block style={{width: "100vw"}} /></Selector>
         </div>
    );
}
 

Или сделайте .рабочее пространство на 100% от его родительского элемента, сделайте так, чтобы селектор занимал 100% его родительского элемента (.workspace) и придавал блоку или вводу желаемый размер :

 
 <div className="workspace" style={{width: "100%"}} >
              <Selector style={{width: "100%"}} ><Input /></Selector>
              <Selector style={{width: "100%"}} ><Block/></Selector>
         </div>

 

но вам нужно, чтобы максимальная ширина составляла 100% от файла css.

   max-width: 100%;