Блог

Главная - Вопросы по программированию - Встроенный стиль React не влияет на мой пользовательский компонент

Встроенный стиль React не влияет на мой пользовательский компонент

#javascript #reactjs #styled-components

#javascript #reactjs #styled-компоненты

Вопрос:

У меня есть пользовательский компонент, в котором мне нужно добавить его на первое место в одном из моих применений. Я пытался <MyComponent style={{ marginTop: '10px' }}> , а также 

 const myStyle = { marginTop: '10px' };
`<MyComponent style={myStyle}>`;

И оба они не работают.
Когда я делаю то же самое в том же файле для простого <div> (например, <div style={{ marginTop: '10px' }}> и <div style={myStyle}> , это работает, как ожидалось.

Возможно, важно упомянуть, что завершающим элементом моего пользовательского компонента ( <MyComponent/> ) является styled-component .

В любом случае был бы признателен, если бы это исправили или заставили работать. Спасибо!

Комментарии:

1. Вы используете компоненты класса или функциональные компоненты?

2. Если вы используете стилизованный компонент, то зачем вам встроенные стили mate?

3. @MaheerAli Функциональный компонент

4. @CodeManiac Созданный мной компонент повторно используется в разных разделах, и поэтому каждый раз он выравнивается по-разному, но теперь, когда я его пишу, возможно, я смогу разрешить передачу ему реквизита marginTop. Ты, я все еще удивляюсь, почему это не работает

5. Вы можете просто передать props и, соответственно, получить css. вот почему мы используем стилизованный компонент

Ответ №1:

style Реквизит будет таким же, как и любой другой реквизит для пользовательского компонента. Вам нужно взять style prop, предоставленный MyComponent , и добавить его в style prop одного из элементов внутри MyComponent .

Пример

 function MyComponent(props) {
  return <div style={props.style}>MyComponent</div>;
}

function MyBrokenComponent() {
  return <div>MyBrokenComponent</div>;
}

function App() {
  const style = { marginTop: "10px", backgroundColor: "green" };

  return (
    <div>
      <MyBrokenComponent style={style} />
      <MyComponent style={style} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Ответ №2:

<MyComponent style={myStyle}> является компонентом react, и затем вы передаете, style он будет передан как обычный prop . Внутренний стиль применяется к элементам html, а не к компонентам React.

 class App extends React.Component {
  render() {
    return (<div>App</div>);
  }
}
ReactDOM.render(<React.Fragment><App style={{color:"blue"}}/><div style={{color:"blue"}}>Element</div></React.Fragment>,document.getElementById('root'))  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Ответ №3:

Поскольку вы используете библиотеку Styled-components, вы можете передавать реквизиты и на основе реквизитов устанавливать стили

 const MyComponent = styled.div`
  margin-top: ${props => props.marginTop || 'initial'}
`

<MyComponent marginTop = '20px' />