Как отобразить некоторые значения с помощью styled-компонентов? - PullRequest
Новая
       34

Как отобразить некоторые значения с помощью styled-компонентов?

0 голосов
/ 03 октября 2019

Я новичок в styleled-компонентах и ​​немного растерялся. Можем ли мы что-то отобразить или добавить функциональность в style-compoentns. OR styled-components - это компонент, к которому мы можем применить только CSS *

Ответы [ 3 ]

0 голосов
/ 03 октября 2019

Можем ли мы что-то отобразить или добавить функциональность к стилевым компонентам?

Да, стилевые компоненты могут использоваться как любой собственный компонент. Так что, как HTML <button> может использоваться для отображения чего-либо, вы можете использовать стилизованную кнопку для этого. См. Ниже.

Точно так же вы можете добавить функциональность, как в родном компоненте, например, прослушивая события щелчка. Приведенная ниже демонстрация «добавляет» функциональность к ColorfulButton, обрабатывая его событие щелчка.

Смотрите также, как цвет передается в качестве реквизита ColorfulButton через mycolor="green": 

const ColorfulButton = styled.button`
  display: inline-block;
  color: ${props => props.mycolor || "blue"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  display: block;
`;

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = { text: "Learn JavaScript (click me)", done: true }
  }
  handleClick = e => {
    this.setState({...this.state, done: !this.state.done});
  }
  
  render() {
    return (
      <div>
        <ColorfulButton onClick={this.handleClick} mycolor="green">{this.state.text}</ColorfulButton>
        <br />
        {this.state.done ? 'Yes' : 'No'}
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<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>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

<div id="app"></div>
0 голосов
/ 03 октября 2019

Вы можете создать CSS-файл и импортировать его в свои различные компоненты, такие как создание класса в CSS, и использовать этот класс в своем компоненте как className="". Кроме того, вы можете ссылаться на встроенный CSS следующим образом: style={{}}, убедитесь, что имя свойства, такое как font-size, будет записано в fontSize в React Inline CSS. Каждое свойство CSS, у которого есть тире в середине имени свойства, дефис будет удален, а следующая буква после тире будет написана заглавными буквами, а также значение свойства будет заключено в двойные или одинарные кавычки.

0 голосов
/ 03 октября 2019

styled-components в первую очередь предназначен для применения CSS.

Поэтому обычно вы используете компоненты-обертки, которые предоставляют содержимое, и компоненты, полученные из стилевых компонентов, для оформления.

Иногда мне показалось полезным использовать конструктор .attrs для передачи children, когда содержимое очень специфично для компонента. 

const ResourceMissingError= styled.div.attrs({
    children: 'This resource could not be found'
})`color: red`;

render(<ResourceMissingError />);
...